ajax 发布但无法阻止刷新

Question

在 ajax 发布后我的页面刷新出现问题，我尝试了 6 种不同的变体，有一次我得到了正确的结果，但无法阻止页面刷新，并且在搜索网络和周围之后这个网站现在没有一个工作，它仍然令人耳目一新......

当前代码是：

$('#submit_btn').click(function() {
/*event.preventDefault();*/
var curPassword = $("input#curPassword").val();
var newPassword = $("input#newPassword").val();
var new2Password = $("input#new2Password").val();
/*var params = 'curPassword='+ curPassword + '&newPassword=' + newPassword + '&new2Password=' + new2Password; */
var params = {
    curPassword: curPassword,
    newPassword: newPassword,
    new2Password:new2Password
};
$.ajax({
        type: "POST",
        url: "testAjax.php",
        data: params,
        success: function(msg){
            alert(msg);
        }
    });
    return false;
});

形式是：

<form method="post" action="" name="confirmChange" class="confirmChange">
<label for="curPassword">Current Password:</label>
<input type="password" name="curPassword" id="curPassword" value="" />
<label for="newPassword">New Password:</label>
<input type="password" name="newPassword" id="newPassword" value="" />
<label for="new2Password">Confirm New Password:</label>
<input type="password" name="new2Password" id="new2Password" value="" />
<br />
<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change" />

感谢任何帮助使其工作=/

更新： 取出其他非直接相关的代码，因为它有点使问题变得混乱。还更新了代码以反映最新版本。 我将 ajax url 更改为一个简单的 textAjax.php 并带有一个简单的 echo hello world ，但我仍然一无所获。

更新 2 尝试将javascript代码更改为：

$('#submit_btn').click(function() {
        alert('Button Clicked');
});

我什么也没得到...如果是下面的表格，那么点击功能怎么可能根本不起作用？

Answer 1

您不需要使用 type="submit" 作为您的输入。只需使用 type="button" 并在按钮的单击事件上调用 ajax 函数。

<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change">

$('#submit_btn').click(function() {
  (ajax code here)
});

preventDefault() 也可以，但在我看来，当您完全可以避免使用提交按钮时，为什么要阻止事件自然发生？

更新：我刚刚意识到使用提交将允许用户按 Enter 来触发您的操作，所以也许这也有一些优点。无论如何，here's a similar question that contains elaborations into preventDefault()。

更新 2：您需要修复 ajax 函数中的参数。使用数组而不是尝试构建查询字符串：

var params = {
curPassword: curPassword,
newPassword: newPassword,
new2Password:new2Password
};

Answer 2

在以下代码块中封装您的 AJAX 调用

$('form.confirmChange').submit(function(event) { event.preventDefault(); #剩下的代码在这里 });

preventDefault() 将阻止事件的默认动作触发。

Answer 3

试试这个

<script>
function refreshpage(){
 (ajax code here)
  return false;
}
</script>

<form onsubmit="return refreshpage();">
<input type = "submit" value="submit_btn">
</form>

Answer 4

我想我通过以下方式修复了它：

$('#submit_btn').live('click', (function() {

我至少在单击时开始收到响应，但我没有更新或从 php 文件中获取任何回声，但希望这会更容易调试。 :)

Answer 5

我遇到了同样的问题。就像你一样，我将我的 <input> 标签包裹在 <form> 标签对中。尽管没有<submit>，但我发现当我单击按钮触发Ajax 调用时，它正在刷新页面——实际上是向页面提交表单。

我最终删除了<form> 标记，并且这种行为停止了，但 Ajax 仍然按预期工作。我希望这对遇到这种情况的其他人有所帮助。

Answer 6

使用循环只运行一次 ajax 调用。

var i;
for(i=0;i<1;i++){
//ajax code here
} 

那么，它就不会一次又一次地调用..