jquery serialize 和 $.post

php serialization jquery post get

2022-08-30 19:12:52

我正在尝试使用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;

答案 1

如果您使用某个元素来激活序列化和 ajax，并且该元素位于该元素中，则无论您使用 jQuery 为其分配什么其他 .click 赋值，它都会自动充当表单提交。<button><button>formbutton

类型='提交'

<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>

答案 2

尝试使用 serializeArray（）而不是 serialize（）。serialize（）将生成 url 编码的查询字符串，而 serializeArray（）将生成 JSON 数据结构。