如何在成功或失败时停止 jquery ajax 页面重新加载答案

【问题标题】：How to stop jquery ajax page reload on success or failure如何在成功或失败时停止 jquery ajax 页面重新加载
【发布时间】：2014-04-24 01:37:51
【问题描述】：

我在成功的 ajax jquery 中遇到问题。即使在返回 false 之后，我的整个 jsp 也会重新加载 ajax 成功。如何防止页面重新加载。

function AjaxCall(category){

var formValue = $('#TP').serialize();
$.post('saveIndvQuestionnaire.jsp?'+formValue+'&category='+category,
//$.post('callPage.jsp',
        function(data) {
    return false;
});
}

我正在从输入类型图像调用 AjaxCall 函数

<input id="test" type="image" onclick="javascript:AjaxCall('Test');" src="../images/v10/larrow.png">

我不确定我是否在某处阅读过类型图像在点击时进行了两次调用。

谢谢。

【问题讨论】：

是什么触发了通话？我猜只是将return 移到回调之外
如果您正在执行“提交”按钮之类的操作，则需要使用e.preventDefault() 来防止发生默认操作
@tymeJV 我正在调用上面的函数 onclick
@pise onclick 什么？
@tymeJV <input id="test" type="image" onclick="javascript:AjaxCall('Test');" src="../images/v10/larrow.png">

标签： jquery ajax

【解决方案1】：

也许问题在于输入类型图像的行为。 https://developer.mozilla.org/es/docs/Web/HTML/Element/Input 尝试在你的函数中使用 e.preventDefault() 并且不应该提交。

$( "#test" ).click(function( event ) {
  event.preventDefault();
var formValue = $('#TP').serialize();
$.post('saveIndvQuestionnaire.jsp?'+formValue+'&category='+category,
        function(data) {
    return false;
});

});

例子

http://jsfiddle.net/HBeVv/10/

您可以使用另一个 html 控件来实现此目的，例如带有图像的 href：

<a href="#" onClick="alert('Hello World!')"><img title="The Link" /></a>

【讨论】：

我使用href而不是输入类型图像，现在我的代码工作正常.. Thaks

【解决方案2】：

我觉得你也可以这样

$('YourForm').submit(function(e){
   e.preventDefault();
   formdata=$(this).serialize();
   $.ajax({
      type: "POST",
      url: url,
      data: formdata
      }).done(function(data){
  //do something
   });
});

【讨论】：

【解决方案3】：

试试这个：

<input id="test" type="image" onclick="return javascript:AjaxCall('Test');" src="../images/v10/larrow.png">

您应该在点击时“返回”响应。

【讨论】：