jquery序列化和$ .post

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

如果你使用元素来激活serialize和ajax,并且如果元素在form元素中,那么该button自动充当表单提交,无论你用jQuery赋予它什么其他的.click赋值。

类型=“提交”

是一回事。 如果将表单放在

元素中,他们将提交表单。

类型=“按钮”

不同。 它只是一个普通按钮,不会提交表单(除非您故意让它通过JavaScript提交表单)。

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

可能的解决方案

1 – 按类型button 。 如上所述,这将阻止按钮提交表单。

之前:

 

后:

 

2 – 将元素移到

元素之外。 这将阻止按钮提交表单。

之前:

 

后:

 

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); }); }); 

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

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

是什么让您相信数据被附加到URL?

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

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

所以这可能有点迟钝,但我做了一个function来帮助我做这件事,因为我厌倦了每次都做了一堆修复。 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; } 

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

 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来处理来自服务器的所有回复。

试试这个语法。 我使用它来通过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)); }); 

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

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

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