Ajax - jQuery和Ajax错误/无效

Question

I am building a webpage that contains a div which holds some data retrieved from a MySql database through PHP. This div shows some products and on its left there is a simple nav bar with different categories. What I am attempting to do is that when the user clicks a category of this nav bar, the content of the div will change, showing the products of that category all of which are stored in the db. So I tried using Ajax (my first time btw), and I can't seem to make it work. My project structure is something like this:

Parent directory

• php > index.php
• css > index.css
• js > index.js
• img > images here
• ajax> products-ajax.js / products-ajax.php

The index.php file is linked to both index.js AND products-ajax.js However, I have already tried including the Ajax line of code in both index.js and index.php but I can't make it recieve data back from products-ajax.php Any help is appreciated.

And here's what my test code looks like:

/* 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;

?>

I realized my broswer's debugger says there's a missing parentheses:

$('.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)});

});

</div>

Answer 1

Using $.ajax() instead of $.post(), you could add an error handler which would give you precious information (maybe you can with $.post(), but I'm not familiar with this function, which afaik is just a shortcut to $.ajax()). It could be something like :

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 );
});

Edit: and prefer console.log() rather than alert() for debugging. Especially with asynchronous interactions, alert() sometimes leads to surprises...