5

在 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');
});

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

4

6 回答 6

2

您不需要使用 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() 也可以，但是，在我看来，当您可以完全避免使用提交按钮时，为什么要阻止事件自然发生呢？

更新： 我刚刚意识到使用提交将允许用户按回车键来触发您的操作，所以也许这也有一些优点。无论如何，这是一个类似的问题，其中包含对 preventDefault() 的详细说明。

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

var params = {
curPassword: curPassword,
newPassword: newPassword,
new2Password:new2Password
};
于 2012-06-08T04:53:10.760 回答
1

尝试这个

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

<form onsubmit="return refreshpage();">
<input type = "submit" value="submit_btn">
</form>
于 2012-06-08T05:10:05.340 回答
1

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

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

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

于 2012-06-08T04:53:25.137 回答
0

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

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

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

于 2015-04-26T14:10:33.793 回答
0

我想我使用以下方法修复了它：

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

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

于 2012-06-10T03:36:00.173 回答
0

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

我最终删除了<form>标签并且这种行为停止了，但 Ajax 仍然按预期工作。我希望这可以帮助其他正在经历这种情况的人。

于 2015-04-12T03:34:58.133 回答