通过jQuery Ajax发送多种表单数据

本文介绍了通过jQuery Ajax发送多种表单数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想通过jQuery Ajax调用发送数据的两种形式.我设法成功地以一种形式发送了数据，但无法通过同一Ajax调用从这两个数据中发送数据.

I have two forms for which I want to send the data through jQuery Ajax call. I managed to send it successfully for one form but I am not able to send the data from both of them through the same Ajax call.

我的表格是:

<form id="filter-group1" method="post" name="filtergroup1"> <input type="checkbox" name="colour1" value="Value1" onclick="filterBy()" /><label>Option 1</label> <input type="checkbox" name="colour2" value="Value2" onclick="filterBy()" /><label>Option 2</label> <input type="checkbox" name="colour3" value="Value3" onclick="filterBy()" /><label>Option 3</label> </form> <form id="filter-group2" method="post" name="filtergroup2"> <input type="checkbox" name="size1" value="Value1" onclick="filterBy()" /><label>Option 1</label> <input type="checkbox" name="size2" value="Value2" onclick="filterBy()" /><label>Option 2</label> <input type="checkbox" name="size3" value="Value3" onclick="filterBy()" /><label>Option 3</label> </form>

函数是:

function filterBy() { var fgroup1 = document.filtergroup1; var fgroup2 = document.filtergroup2; var dataString1 = $(fgroup1).serialize(); var dataString2 = $(fgroup2).serialize(); var filterdata = []; filterdata.push(dataString1,dataString2); $.ajax( { type: 'POST', url: 'filter.php', data: filterdata, success: function(data) { console.log(data); $('#message').html(data); } }); }

我在php文件中有这个

I have this in the php file:

echo var_export($_POST);

如果我替换数据:该函数对于一种形式的功能正常工作

The function works fine for one form if I replace data: with

data: dataString1,

我试图用两种形式的数据获得相同的结果，但是我不想为每种形式使用不同的功能.

I am trying to achieve the same result with the data from both forms but I don't want to use a different function for each form.

感谢您的帮助.谢谢.

推荐答案

jQuery的serialize()方法将您的输入值与'&'连接在一起.符号-因此，当您推送两个序列化的表单数据时，您正在创建一个数组，并且未将两个形式的值与'&'连接在一起. (这是将被正确解析的代码).您可以:(1)使用'&'将数组中的项目连接成字符串.或(2)使用$("#form1, #form2").serialize()进行操作:

jQuery's serialize() method concatenates your input values with an '&' symbol - therefore when you are pushing two serialized form data, you are creating an array and not concatenating the values in two forms with '&' (which is the one that will be parsed correctly). You can either: (1) concatenate the items in the array into a string with '&' or (2) use $("#form1, #form2").serialize() to do it:

function filterBy() { // Construct data string var dataString = $("#filter-group1, #filter-group2").serialize(); // Log in console so you can see the final serialized data sent to AJAX console.log(dataString); // Do AJAX $.ajax( { type: 'POST', url: 'filter.php', data: dataString, success: function(data) { console.log(data); $('#message').html(data); } }); }

:在旁注中，我强烈建议不要使用内联JavaScript.您应该将内容与功能分开.而是使用.click()函数，例如:

: On a side note, I highly discourage using inline JavaScript. You should separate content from function. Instead, use the .click() function, like:

$("form input[type='checkbox']").click(function() { var dataString = $("#filter-group1, #filter-group2").serialize(); // (and more...) });

我也不完全理解使用两种不同形式的原因...

I also don't exactly understand the reasoning behind using two separate forms...