我正在构建一个网页，其中包含一个div，它保存通过PHP从MySql数据库检索到的一些数据。这个div显示了一些产品，在它的左边有一个简单的导航栏，包含不同的类别。我试图做的是，当用户点击导航栏的一个类别时，div的内容将发生变化，显示该类别的产品，所有这些产品都存储在数据库中。所以我尝试使用Ajax（我第一次使用btw），但我似乎无法使其工作。我的项目结构是这样的：
父目录
- php>index.php
- css>index.css
- js>index.js
- img>此处的图像
- ajax>products-ajax.js/products-ajax.php
index.php文件链接到index.js和products-jax.js然而，我已经尝试在index.js和index.php中包含Ajax代码行，但我无法让它从products-jax.php接收数据感谢您的帮助。
下面是我的测试代码：
/* THIS IS THE products-ajax.js */
$(document).ready(function(){
$('.products-list li').click(function(){
$.post("products-ajax.php",
{p: "Product name"},
success: function(data){alert(data)}
);
});
});<?php
/* THIS IS THE products-ajax.php */
$p = $_POST['p'];
echo $p;
?>我意识到我兄弟的调试器说少了一个括号：
$('.products-list li').click(function(){
//The debugger says HERE v should go a parentheses
$.post("products-ajax.php", {p: "Product name"}, success: function(data{alert(data)});
});
使用$.ajax()而不是$.post()，您可以添加一个错误处理程序，它将为您提供宝贵的信息（也许您可以使用$.post()，但我不熟悉这个函数，afaik只是$.ajax()的快捷方式）。它可能类似于：
var request = $.ajax({
url: "products-ajax.php",
method: "POST",
data: { p: "Product name" }
});
request.done(function( data ) {
alert( data );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
编辑：并且调试时更喜欢console.log()而不是alert()。特别是在异步交互中，alert()有时会带来惊喜。。。