jquery序列化和$ .post

Question

我正在尝试使用jQuery中的$ .post方法从表单中发送大量数据.我首先使用serialize()函数将所有表单数据组成一个长字符串,然后我将在服务器端爆炸.奇怪的是当我尝试使用$ .post发送它时,它将serialize()的结果附加到URL,就像我使用GET发送它一样.任何人都有任何想法为什么会这样？

这是jquery:

$("#addShowFormSubmit").click(function(){
  var perfTimes = $("#addShowForm").serialize();
  $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) {
    $("#addShowSuccess").empty().slideDown("slow").append(data);
  });
});  

这是PHP:

$show = $_POST['name'];
$results = $_POST['results'];
$perfs = explode("&", $results);
foreach($perfs as $perf) {
    $perf_key_values = explode("=", $perf);
    $key = urldecode($perf_key_values[0]);
    $values = urldecode($perf_key_values[1]);
}
echo $key, $values;  

Answer 1

如果您正在使用<button>元素来激活序列化和ajax,并且该<button>元素位于form元素内,则button无论您使用jQuery进行什么其他.click赋值,它都会自动充当表单提交.

类型="提交"

<button></button>并且<button type='submit'></button>是一回事.如果放在<form>元素中,他们将提交表格.

类型="按钮"

<button type='button'></button>是不同的.它只是一个普通按钮,不会提交表单(除非您故意让它通过JavaScript提交表单).

在表单元素没有指定action属性的情况下,此提交只是将数据发送回同一页面.因此,您最终会看到页面刷新以及URL中出现的序列化数据,就像您在ajax中使用GET一样.

可能的解决方案

1 - 制作<button>类型button.如上所述,这将阻止按钮提交表单.

之前:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
    <button id='mySubmitButton'>Submit</button>
</form>

后:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
<button type='button' id='mySubmitButton'>Submit</button>
</form>

2 - 将<button>元素移动到元素外部<form>.这将阻止按钮提交表单.

之前:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
    <button id='mySubmitButton'>Submit</button>
</form>

后:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
</form>
<button id='mySubmitButton'>Submit</button>

3 - 添加preventDefault()到按钮单击处理程序以防止提交表单(它是默认操作):

$("#addShowFormSubmit").click(function(event){
  event.preventDefault();
  var perfTimes = $("#addShowForm").serialize();
  $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes },      function(data) {
    $("#addShowSuccess").empty().slideDown("slow").append(data);
  });
});

显然没有看到你的所有代码,我不知道你的问题是否属于这种情况,但我所见过的行为的唯一原因是因为提交按钮<button>没有指定类型.

Answer 2

尝试使用serializeArray()而不是serialize().serialize()将生成一个url编码的查询字符串,而serializeArray()将生成一个JSON数据结构.