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

});

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