jquery 序列化和 $.post [英] jquery serialize and $.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 = expand("&", $results);foreach($perfs 作为 $perf) {$perf_key_values = expand("=", $perf);$key = urldecode($perf_key_values[0]);$values = urldecode($perf_key_values[1]);}回声 $key, $values;

解决方案

如果您使用 元素来激活序列化和 ajax，并且如果该 ; 元素位于 form 元素内，button 自动充当表单提交，无论您使用 jQuery 给它什么其他 .click 分配.>

type='submit'

<button></button> 和

是同一个东西.如果将表单放置在

元素中，他们将提交表单.

type='button'

不同.它只是一个普通的按钮，不会提交表单(除非你故意让它通过 JavaScript 提交表单).

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

可能的解决方案

1 - 使 类型为 button.如上所述，这将阻止按钮提交表单.

之前:

<!--这里有一些输入、选择、文本区域等--><button id='mySubmitButton'>提交</button></表单>

之后:

<!--这里有一些输入、选择、文本区域等--><button type='button' id='mySubmitButton'>提交</button></表单>

2 - 将

元素移到 元素之外.这将阻止按钮提交表单.

之前:

<!--这里有一些输入、选择、文本区域等--><button id='mySubmitButton'>提交</button></表单>

之后:

<!--这里有一些输入、选择、文本区域等--></表单><button id='mySubmitButton'>提交</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);});});

显然没有看到您的所有代码，我不知道您的问题是否属于这种情况，但我见过您描述的行为的唯一原因是因为提交按钮是一个

没有指定类型.

I'm trying to send a lot of data from a form using the $.post method in jQuery. I've used the serialize() function first to make all the form data into one long string which I will then explode serverside. The weird thing is when I try and send it using $.post it appends the result of the serialize() to the URL as if I was sending it using GET. Anyone have any ideas why this is happening?

Here's the 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);
  });
});  

here's the 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;  

解决方案

If you are using a <button> element to activate the serialize and ajax, and if that <button> element is within the form element, the button automatically acts as a form submission, no matter what other .click assignment you give it with jQuery.

type='submit'

<button></button> and <button type='submit'></button> are the same thing. They will submit a form if placed within the <form> element.

type='button'

<button type='button'></button> is different. It is just a normal button and will not submit the form (unless you purposely make it submit the form via JavaScript).

And in the case where a form element has no action attribute specified, this submission simply sends the data back onto the same page. So you will end up seeing a page refresh, along with the serialized data appearing in the URL as if you used GET in your ajax.

Possible solutions

1 - Make the <button> type button. As explained above, this will prevent the button from submitting the form.

Before:

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

After:

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

2 - Move the <button> element outside the <form> element. This will prevent the button from submitting the form.

Before:

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

After:

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

3 - Add in the preventDefault() into the button click handler to prevent the form from being submitted (it's default action):

$("#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);
  });
});

Obviously without seeing all your code, I have no idea if this is the case for your issue, but the only reason I have ever seen behavior you are describing is because the submit button was a <button> without a type specified.

这篇关于jquery 序列化和 $.post的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！