ajax表单提交，我哪里错了？

Question

我正在尝试使用ajax提交密码更改，以便能够在更改后保留在相同的ui.tab页面上，并提供视觉反馈。 如果我在表单中留下action =“change_password_do.php”，那么我可以更改密码，这样php文件就可以工作。如果我在表单中放置action =“”，我什么也得不到。 显然，在我的ajax中有一个基本的错误，但我无法找到它。有人能指点我吗？

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#new_password_submit').click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "change_password_do.php", 
      data: $("form.pw_todo").serialize() 
     }); 
    }); 
}); 
</script>      

<div id="tabs_6" class="tabs"> 
     <h2 class="tablecaption">Change your password</h2> 

     <form id="change_pass" class="pw_todo" method="post" action=""> 

      <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password"/><br /> 
      <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password"/><br /> 
      <input type="submit" id="new_password_submit" value="Submit" class="button"/> 

     </form> 
</div> 

Answer 1

您需要通过返回false从点击处理程序取消按钮的默认操作：

$('#new_password_submit').click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "change_password_do.php", 
     data: $("form.pw_todo").serialize() 
    }); 
    return false; // <-- That's very important 
}); 

作为替代方案，你可以取消这样的默认操作：

<script type="text/javascript"> 
$(document).ready(function(evt) { 
    $('#new_password_submit').click(function() { 
     evt.preventDefault(); // <-- That's very important 

     $.ajax({ 
      type: "POST", 
      url: "change_password_do.php", 
      data: $("form.pw_todo").serialize() 
     }); 
    }); 
}); 
</script> 

由于new_password_submit是一个提交按钮，如果您在点击按钮时未取消点击处理程序中的默认操作，则表单将被提交，浏览器将redi直接离开页面，没有时间让AJAX请求执行。

这就是说我建议你订阅表单的.submit事件，而不是提交按钮的.click事件。这样你就可以保证AJAX请求将始终执行。请记住，除了点击提交按钮之外，可以通过其他方式提交表单。例如，表单可以由用户在某些输入字段内按下输入键提交。如果他以这种方式提交表单，则AJAX请求将永远不会执行。

所以，这里是我推荐的解决方案：

$('#change_pass').submit(function(evt) { 
    evt.preventDefault(); // <-- That's very important 

    $.ajax({ 
     type: this.method, 
     url: this.action, 
     data: $(this).serialize() 
    }); 
}); 

然后确保你已经设置表单上的action属性：

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php"> 

现在所有的JavaScript做的是不显眼AJAXifying提交的形式。如果用户禁用JavaScript，您的代码仍然可以使用。

Answer 2

我觉得你不需要使用任何形式或提交按钮因为您通过AJAX已经传递自己的价值观，直接传递值的$.ajax();数据属性，并继续你的AJAX方法。

<script type="text/javascript"> 
$(document).ready(function() {  
    $('#new_password_submit').click(function(){ 
     $.ajax({ 
     type: "POST", 
     url: "change_password_do.php", 
     data: {'password1': $('#password1').val(), 
       'password2': $('#password2').val()} 
     }); 
    }); 
}); 
</script>      

<div id="tabs_6" class="tabs"> 
     <h2 class="tablecaption">Change your password</h2> 

      <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password" id="password1"/><br /> 
      <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password" id="password2"/><br /> 
      <input type="button" id="new_password_submit" value="Submit" class="button"/> 

</div> 

注意：我刚才添加的ID password1和password2为了您的方便

Answer 3

你不得不取消提交事件，否则表格将仍然可以正常提交，Ajax调用之前。

$('#new_password_submit').click(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      .... 

接下来你缺少ajax调用的成功函数，所以如果它起作用的话，你至少不会注意到它。

最后，检查一下jQuery form plugin，它确实是你要找的。没有什么奇特的，但它有用，如果你需要它很多

Answer 4

不要绑定按钮的点击事件，更好地绑定形式的提交事件。

<script type="text/javascript"> 

$(function() { 
    $('#change_pass').submit(function(e) { 

     // this will prevent default form behaviour 
     e.preventDefault() 

     $.ajax({ 
      type: "POST", 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      success: function(data){ 

       // consider displaying some message on success 

      } 
     }); 
    }); 
}); 

</script> 

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php"> 

... 

</form>