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

我有一个jQuery AJAX函数,并希望将整个表单作为发布数据。 我们不断更新表单,因此不断更新应该在查询中发送的表单input变得单调乏味。

有一个function就是这样做的:

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

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

通常在表单元素上使用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> 

将导致查询string包含相同查询参数的多个出现:

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

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

我使用这个JS代码来减less多个参数到逗号分隔的单个键(无耻地从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()); 

希望有所帮助。

如果你想用post方法发送一个表单,serialize()不是一个好主意。 例如,如果你想通过ajax传递文件,它不会工作。

更好的解决scheme是制作一个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 } }); 

使用

序列化()

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

将表单序列化为查询string,可以通过Ajax请求将其发送到服务器。

一个好的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 ); } }); 

要将数据添加到表单中,您可以在表单中使用隐藏的input,也可以随时添加数据:

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