javascript ajax使用php提交不刷新表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20385253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ajax on submit no refresh form using php
提问by Sickest
ok so i know this ajax works, but i cant seem to understand why it's not submitting here.
好的，所以我知道这个 ajax 有效，但我似乎无法理解为什么它不在这里提交。
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(){
$.ajax({
type: "POST",
url: "postitem.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
submit form
提交表格
<form action="" method="post" onsubmit="return false;" id="myform">
submit button
提交按钮
<input type="hidden" value="Post" name="submit" />
<button type="submit" title="Done" style="height:33px; width:50px">
<img src="../../css/images/plus_25.png" />
</button>
i'm pretty something is wrong with the button, but i want to keep the way the button is because alot of my other forms use this same button, thanks if you can explain to me why click this submit button does nothing.
我觉得这个按钮有点问题，但我想保持按钮的方式是因为我的很多其他表单都使用这个相同的按钮，如果你能向我解释为什么点击这个提交按钮什么都不做，谢谢。
回答by showdev
You are selecting an <input>instead of a <button>. I had success by changing your jQuery selector from this:
您正在选择一个<input>而不是一个<button>。通过更改您的 jQuery 选择器，我取得了成功：
$('input[type=submit]')
to this:
对此：
$('button[type=submit]')
回答by MonkeyZeus
Not all browsers interpret a clickattached to a submit button as submitting the form so you are effectively just negating the click of that button.
并非所有浏览器都将click提交按钮的附件解释为提交表单，因此您实际上只是在否定单击该按钮。
Preventing a form submission should preferably be captured by attaching the submithandler to the <form>when you have a <input type="submit">or <button type="submit>so this is the best way to assure success:
防止表单提交最好由安装捕获submit处理的<form>，当你有一个<input type="submit">或<button type="submit>因此这是确保成功的最佳方式：
jQuery
jQuery
$(function(){
$('#myform').on('submit', function(e){
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'), // <-- get method of form
url: $(this).attr('action'), // <-- get action of form
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
HTML
HTML
<form action="postitem.php" method="POST" id="myform">
<input type="hidden" value="Post" name="submit" />
<button type="submit" title="Done" style="height:33px; width:50px">
<img src="../../css/images/plus_25.png" />
</button>
</form>
回答by Mouhamed Halloul
try this :
试试这个 ：
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "postitem.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
