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提交表单）。

如果 form 元素没有指定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数据结构。

Answer 3

是什么让您相信数据会附加到网址？

无论如何，在表单数据本身传递表单值会不会更有意义？它将允许您跳过“爆炸”步骤：

$("#addShowFormSubmit")
  .click(function() { 
      var perfTimes = $("#addShowForm").serialize(); 
      $.post("includes/add_show.php", 
         $.param({name: $("#showTitle").val()}) + "&" + perfTimes, 
         function(data) {...}); 
  });

Answer 4

所以这可能有点迟钝，但我做了一个功能来帮助我做这件事，因为我厌倦了每次都做了一堆修复。 serializeArray有点烦人，因为它提供了一个对象集合，当我想要PhP重构的所有内容都是一个关联数组。下面的函数将遍历序列化数组，并且只有在存在值时才会构建具有适当属性的新对象。

首先，函数（它采用相关表单的ID）：

function wrapFormValues(form) { 
    form = "#" + form.attr("id") + " :input";
    form = $(form).serializeArray();
    var dataArray = new Object();

    for( index in form)
    {   
        if(form[index].value)   {
            dataArray[form[index].name] = form[index].value;    
        }
    }       

    return dataArray; 
}

在构建我的帖子时，我通常也会使用一个对象，因为我通常在表单数据之前标记两个或三个其他值，我觉得它看起来比定义内联更清晰，所以最后一步看起来像这样：

var payload = new Object(); 
//stringify requires json2.js from http://www.json.org/js.html
payload.data = JSON.stringify(data);

$.post("page.php", payload,  
    function(reply) {
        //deal with reply.
    });

服务器端你需要做的就是$payload = json_decode($_POST['data'], true)，你自己就有了一个关联数组，其中的键是表单字段的名称。

完全免责声明，多次选择可能无法在此处运行，您可能只会获得列表中最后一个值。这也是专门为了我的一个项目而创建的，所以你可能想要调整它以适合你。例如，我使用json来处理来自服务器的所有回复。

Answer 5

试试这个语法。我使用它来通过ajax调用WCF服务来序列化表单和POST。此外，您可以将此回发一个JSON对象，而不是按照您的方式构建对象。试试这个：

var serializedForm = serializedForm = $("#addShowForm").serializeArray();

$.post("includes/add_show.php", 
    {
        "myObjectName": ("#showTitle").val(), results: perfTimes 
    }, function(data) 
        {
            $("#addShowSuccess").empty()
            .slideDown("slow")
            .append(JSON.stringify(serializedForm)); 
        });

Answer 6

在php方面，您可能需要查看parse_str。它会将url字符串解析为变量，或者如果使用第二个可选参数则解析为数组。

Answer 7

此问题的另一个可能原因：如果您的表单没有分配任何类型的提交操作，只要您在填写表单时按“ENTER”键，表单就会提交到当前URL，因此，您将看到序列化数据显示在URL中，就像您使用GET ajax事务一样。解决此问题的简单方法，只是在按下时阻止ENTER提交表单：

//Prevent Form Submission when Pressing Enter
$("form").bind("keypress", function(e) {
if (e.keyCode == 13)
    return false;
});

jquery序列化和$ .post

7 个答案:

类型= '提交'

类型= '按钮'

可能的解决方案