jquery序列化和$ .post [英] jquery serialize and $.post
问题描述
我试图使用jQuery中的$ .post方法从表单发送大量数据。我首先使用了serialize（）函数来将所有表单数据转换为一个长字符串，然后我将使服务器端爆炸。
奇怪的是，当我尝试使用$ .post发送它时，它会将serialize（）的结果附加到URL上，就像我使用GET发送它一样。
任何人都有任何想法，为什么会发生这种情况？
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?
下面是jquery：
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);
});
});
这里是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;
推荐答案
如果您使用 < button> 元素激活serialize和ajax，如果< button> 元素在表单内元素，无论您使用jQuery提供的其他.click作业，都会自动用作表单提交。
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.
< button>< / button> 和< button type ='submit'>< / button> 是一回事。如果放置在< form> 元素中，他们会提交一个表单。
<button></button> and <button type='submit'></button> are the same thing. They will submit a form if placed within the <form> element.
< button type ='button'>< / button> 是不同的。这只是一个普通的按钮，不会提交表单（除非您故意通过JavaScript提交表单）。
<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).
在表单元素没有指定操作属性，此提交只是将数据发送回同一页面。所以你最终会看到一个页面刷新，以及在URL中出现的序列化数据，就像你在你的ajax中使用GET一样。
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.
1 - 使<按钮> 类型按钮。如上所述，这将阻止按钮提交表单。
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> - 移动<按钮> 元素在< 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> - 添加 preventDefault（） （默认操作）：
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屋！
