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

Question

我有一个 jQuery ajax 函数，想提交整个表单作为发布数据。我们不断更新表单，因此不断更新应在请求中发送的表单输入变得很乏味。

Answer 1

有一个函数可以做到这一点：

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

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

Answer 2

如果您想使用 post 方法发送表单，serialize() 不是一个好主意。例如，如果你想通过 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
        }
    });

Answer 3

一般在表单元素上使用

serialize()

。

请注意，多个 选项在同一密钥下序列化，例如 <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()); 希望有帮助。 使用 序列化（） var str = $("form").serialize(); 将表单序列化为查询字符串，可以通过 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 ); } }); 要将数据添加到表单中，您可以使用表单中的隐藏输入，也可以动态添加： 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> 将所有输入传递到表单数据对象（文本、隐藏、无线电和文本区域）的最佳方法:) function pass_all_inputs_form_data(form_id) { var form_data = new FormData(); var inputs = $('#' + form_id)[0].getElementsByTagName("input") for (i = 0; i < inputs.length; i++) { if (inputs[i].type == 'radio') { if (inputs[i].checked == true) { } } else { form_data.append(inputs[i].id, inputs[i].value); } } var textareas = $('#' + form_id)[0].getElementsByTagName("textarea") for (i = 0; i < textareas.length; i++) { form_data.append(textareas[i].id, $('#' + textareas[i].id).val()); } return form_data; } 其他解决方案对我不起作用。也许我正在处理的项目中的旧 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) } }); }