简单阿贾克斯失败

Question

一个简单的小提琴，其中阿贾克斯失败：

<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> 

和welcome_post.php响应

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

如果我删除event.preventDefault（）的代码加载一个新的PHP页面，工作，否则$ _POST变量没有设置，并提示未定义的索引错误。如何让它设置.post工作？

Answer 1

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

这应该工作：

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

Answer 2

你是不是在你的请求发送任何数据。因为它是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/。

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