[英]jQuery Submit Refreshing Page
以下代码旨在执行纯粹的ajax POST请求,而不是它似乎通过ajax执行POST,然后浏览器导航到响应。
HTML ...
<div id="bin">
<form class="add" method="post" action="/bin/add/">
<p>I'm interested! Save for later.</p>
<input type="hidden" name="product_id" value="23423">
<input type="submit" value="Save">
</form>
<form style="display:none;" class="remove" method="post" action="/bin/remove/">
<p>I changed my mind--I'm not interested.</p>
<input type="hidden" name="product_id" value="23423">
<input type="submit" value="Unsave">
</form>
</div>
jQuery ......
$('#bin form').submit(function() {
$.post($(this).attr('action'),{
success: function(data) { $(this).hide().siblings('form').show() },
data: $(this).serialize()
});
return false;
})
据我了解, return false;
line应该意味着无论如何,任何对提交功能的调用或点击“提交”按钮或点击输入意味着我的功能将执行,浏览器将不会导航到/bin/add
或/bin/remove
。 但由于某种原因,浏览器正在改变页面。
知道我在这里做错了吗? 谢谢。
可能是您的JavaScript失败,因此正在执行默认行为。
尝试在像Firebug这样的工具中检查XHR。
此外,您可以尝试event.preventDefault()
(其中事件回调的第一个参数是event
)。
使用event.preventDefault()
来阻止事件的默认操作。 一个好处是你可以在Ajax请求之前放置它,这样如果它失败了,你仍然会阻止表单提交。
你的代码是失败,因为价值this
是你们成功的回调是全局window
对象。 你试图隐藏它失败了。 你可能希望this
引用表单,如下所示:
$('#bin form').submit(function(ev) {
var _this = this;
ev.preventDefault();
$.post($(this).attr('action'), {
success: function() {
$(_this).hide().siblings('form').show();
},
data: $(this).serialize()
});
})
查看一个工作示例 。
$(...).submit(...)
在$(document).ready(function(){ code here });
?
应该是这样的:
$(document).ready(function() {
$('#bin form').submit(function() {
$.post($(this).attr('action'), {
success: function(data) { $(this).hide().siblings('form').show(); },
data: $(this).serialize()
});
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.