简单.ajax失败

Question

一个简单的小提琴，其中.ajax失败：

<form action="welcome_post.php" method="post" id="f">
Name: <input type="text" name="name"><br>
<input type="submit">
</form>
<script>
  $(document).ready(function(){
      $("#f").submit(function(event) {
          event.preventDefault();
          $.post("/tests/welcome_post.php",function(data){
              alert(data)
          }); 
      }); 
  });
</script>

和Wincul_post.php响应

<?php echo $_POST["name"]; ?>

如果我删除event.preventdefault（），代码将加载一个新的PHP页面并起作用，否则未设置$ _post变量，并具有未定义的索引错误的警报。如何使其设置为.post工作？

Answer 1

您没有在请求中发送任何数据。因为是Ajax，您必须告诉它要使用什么数据。它不会自动使用表单数据，您必须指定它：

$(document).ready(function(){
  $("#f").submit(function(event) {        
    event.preventDefault();
    $.post(
     "/tests/welcome_post.php",
     $(this).serialize(), //this will serialise the form data into the request
     function(data){
      alert(data);
     }
    ); 
  }); 
});

请参阅https://api.jquery.com/jquery.post/有关可以使用此方法提交的参数的完整列表。

另外，您应该使用浏览器开发人员工具的"网络"选项卡来监视请求和响应的内容 - 这将帮助您了解此类问题的根本原因。

Answer 2

它不起作用，因为您实际上没有发送发布数据。

这应该有效：

jQuery('#f').submit(function(evt) {
    evt.preventDefault();
    var data = jQuery(this).serialize();
    jQuery.post('your/url.php', data, function(result) {
        console.log(result);
    });
});