将整个表单作为数据传递给jQuery Ajax函数

8 回答

• 0

  有一个函数正是这样做的：

  http://api.jquery.com/serialize/

  var data = $('form').serialize();
  $.post('url', data);
  

  回复于 2024-04-30T07:43:55+08:00
• 23

  如果你想用post方法发送一个表单，那么serialize（）不是一个好主意 . 例如，如果你想通过ajax传递一个文件，那就不行了 .

  更好的解决方案是制作FormData并发送它：

  var myform = document.getElementById("myform");
      var fd = new FormData(myform );
      $.ajax({
          url: "example.php",
          data: fd,
          cache: false,
          processData: false,
          contentType: false,
          type: 'POST',
          success: function (dataofconfirm) {
              // do something with the result
          }
      });
  

  回复于 2024-04-30T07:43:55+08:00
• 38

  通常在表单元素上使用 serialize() .

  请注意，多个<select>选项在同一个密钥下序列化，例如

  <select id="foo" name="foo" multiple="multiple">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
  </select>
  

  将导致查询字符串包含同一查询参数的多个出现：

  [path]?foo=1&foo=2&foo=3&someotherparams...
  

  这可能不是你想要的后端 .

  我使用这个JS代码将多个参数减少为以逗号分隔的单个键（在John Resig所在地的线程中从评论者的响应中无耻地复制）：

  function compress(data) {
      data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
      return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
  }
  

  将上述内容变为：

  [path]?foo=1,2,3&someotherparams...
  

  在您的JS代码中，您可以这样称呼它：

  var inputs = compress($("#your-form").serialize());
  

  希望有所帮助 .

  回复于 2024-04-30T07:43:55+08:00
• 0

  使用

  serialize( )

  var str = $("form").serialize();
  

  将表单序列化为查询字符串，可以在Ajax请求中将其发送到服务器 .

  回复于 2024-04-30T07:43:55+08:00
• 14

  一个很好的jQuery选项是通过FormData . 通过表单发送文件时，此方法也适用！

  <form id='test' method='post' enctype='multipart/form-data'>
     <input type='text' name='testinput' id='testinput'>
     <button type='submit'>submit</button>
  </form>
  

  你在jQuery中的send函数看起来像这样：

  $( 'form#test' ).submit( function(){
     var data = new FormData( $( 'form#test' )[ 0 ] );
  
     $.ajax( {
        processData: false,
        contentType: false,
  
        data: data,
        dataType: 'json',
        type: $( this ).attr( 'method' );
        url: 'yourapi.php',
        success: function( feedback ){
           console.log( "the feedback from your API: " + feedback );
        }
  });
  

  要向表单添加数据，您可以在表单中使用隐藏的输入，也可以动态添加：

  var data = new FormData( $( 'form#test' )[ 0 ] );
  data.append( 'command', 'value_for_command' );
  

  回复于 2024-04-30T07:43:55+08:00
• 241

  你只需要发布数据 . 并使用jquery ajax函数设置参数 . 这是一个例子 .

  <script>
          $(function () {
  
              $('form').on('submit', function (e) {
  
                  e.preventDefault();
  
                  $.ajax({
                      type: 'post',
                      url: 'your_complete url',
                      data: $('form').serialize(),
                      success: function (response) {
                          //$('form')[0].reset();
                         // $("#feedback").text(response);
                          if(response=="True") {
                              $('form')[0].reset();
                              $("#feedback").text("Your information has been stored.");
                          }
                          else
                              $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                      }
                  });
  
              });
  
          });
      </script>
  

  回复于 2024-04-30T07:43:55+08:00
• -1

  其他解决方案对我不起作用 . 也许我正在处理的项目中的旧DOCTYPE阻止了HTML5选项 .

  我的解决方案

  <form id="form_1" action="result.php" method="post"
   onsubmit="sendForm(this.id);return false">
      <input type="hidden" name="something" value="1">
  </form>
  

  JS：

  function sendForm(form_id){
      var form = $('#'+form_id);
      $.ajax({
          type: 'POST',
          url: $(form).attr('action'),
          data: $(form).serialize(),
          success: function(result) {
              console.log(result)
          }
      });
  }
  

  回复于 2024-04-30T07:43:55+08:00
• 0

  <form id="add-item-form">
      . . .
  </form>   
  
  <script>
      $('#add-item-form').submit(function (event) {
          event.preventDefault();
          var data = $('#add-item-form').serialize();
          $.post("/Item/AddItem", data, function (response) {
              . . .
          });
      });
  </script>
  

  回复于 2024-04-30T07:43:55+08:00