Ajax - jQuery 和 Ajax 错误/不工作

Question

我正在构建一个包含div 的网页，其中包含通过 PHP 从 MySql 数据库中检索到的一些数据。此 div 显示了一些产品，在其左侧有一个简单的导航栏，其中包含不同的类别。我正在尝试做的是，当用户单击此导航栏的类别时，div 的内容将发生变化，显示该类别的所有产品都存储在数据库中。所以我尝试使用Ajax（我第一次顺便说一句），但我似乎无法让它工作。我的项目结构是这样的：

父目录

• php > index.php
• css > index.css
• js > index.js
• img > 图片在这里
• ajax> products-ajax.js / products-ajax.php

index.php 文件链接到 index.js 和 products-ajax.js 但是，我已经尝试在 index.js 和 index.php 中包含 Ajax 代码行，但我无法让它从 products-ajax.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)});

});

Answer 1

使用$.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() 有时会带来惊喜……