php - 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" />

感谢任何帮助让它工作的帮助=/

更新: 取出其他非直接相关的代码，因为它有点使问题困惑。还更新了代码以反射(reflect)最新修订。 我将 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() 也可以，但在我看来，既然可以完全避免使用提交按钮，为什么还要阻止事件自然发生呢？

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

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

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