在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' );