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

Question

我有一个jQuery ajax函数,并希望提交一个完整的表单作为发布数据.我们不断更新表单,因此不断更新应在请求中发送的表单输入变得乏味.

Answer 1

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

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

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

Answer 2

如果要使用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
        }
    });

Answer 3

一般用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());

希望有所帮助.

Answer 4

使用

serialize()

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

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

Answer 5

执行此操作的一个很好的 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 中的发送函数如下所示：

$( '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' );