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

我有一个 jQuery ajax 函数，希望提交一个完整的表单作为文章数据。我们不断地更新表单，因此不断地更新应该在请求中发送的表单输入变得非常单调乏味。

342426 次浏览
小开

使用

序列化()

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

将表单序列化为查询字符串，该字符串可以通过 Ajax 请求发送到服务器。

小开
最佳答案

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

Http://api.jquery.com/serialize/

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

通常对 form 元素使用 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());

希望能帮上忙。

小开

如果希望使用 post 方法发送表单，那么序列化()不是一个好主意。例如，如果你想通过 ajax 传递一个文件，它不会工作。

假设我们有一个具有 id 的表单: “ myform”。

更好的解决方案是创建一个 FormData 并发送它:

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

一个很好的 jQuery 选项是通过 表格数据来实现这一点。此方法也适合通过表单发送文件！

<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' );
小开

你只需要发布数据。使用 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>
小开

其他的解决办法对我不起作用。也许我正在开发的项目中的旧 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>

约翰逊:

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

提交答案