Why is my attempt at a basic Ajax script not working?

Question

I'm currently trying to learn the basics of Ajax through example. By following a basic tutorial, I've managed to create the following script:

<!DOCYTPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
$(function(){
  $('#mybtn').on('click', function(e){
    e.preventDefault();
    $('#mybtn').fadeOut(300);

    $.ajax({
      url: 'ajax-script.php',
      type: 'post',
    }); // end ajax call
  });
</script>
</head>

<body>
    <a href='#' id='mybtn'>click me</a>
</body>

</html>

Combined with a simple php file named ajax-script.php which contains the following code:

<?php

if($_POST) {
  echo "<p>ok</p>";
}

?>

Can anyone identify what I might have done wrong? How can I make this work?

What isn't working? What are you expecting to happen/trying to achieve? — mferly, May 16 '16 at 16:10

score 1 · Accepted Answer · answered May 16 '16 at 16:10

You don't have a success function - that's where the echo'd PHP data will be received.

Also, you need to close the script tag that loads the jQuery library, and use a different script tag to delineate the javascript code.

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('#mybtn').on('click', function(e){
        e.preventDefault();
        $('#mybtn').fadeOut(300);

        $.ajax({
            url: 'ajax-script.php',
            type: 'post',
            success: function(d){
                alert(d);
            }
        }); // end ajax call
    });
</script>

Also, your if ( $_POST ) could cause problems -- either remove that, or post some data:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('#mybtn').on('click', function(e){
        e.preventDefault();
        $('#mybtn').fadeOut(300);

        $.ajax({
            url: 'ajax-script.php',
            type: 'post',
            data: 'test=Hello',
            success: function(d){
                alert(d);
            }
        }); // end ajax call
    });
</script>

Then, you could get your PHP to echo what you sent, thus:

<?php
    if($_POST) {
        $recd = $_POST['test'];
        echo 'PHP side received: ' . $recd;
    }
?>

Thanks for your response. Strangely that doesn't seem to be working either. I've copied and pasted the second JS code you posted into a file titled ajax.php and have updated the php file with what you have provided. I've then uploaded it to my server (here: www.theshitpit.com/beta/ajax.php). Any idea why this may still not be working? — John Smith, May 16 '16 at 16:57
@JohnSmith I added a response as a separate "answer" *(to prevent first answer from becoming too large)* Also, you might find some useful information from [**the examples** in this post](http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) — cssyphus, May 16 '16 at 17:46

score 0 · Answer 2 · answered May 16 '16 at 17:44

To prevent the first answer from becoming too monolithic, I will respond to your comment in this new answer.

A few things to try:

(1) Location of your ajax.php file -- is it in the same folder as the page with the javascript code?

(2) Name of the ajax.php file -- note that in your code it is ajax-script.php

(3) I added an alert after the button click -- did that come up?

(4) I removed the IF condition -- the ajax.php file will echo something back to the javascript success function no matter what.

(5) To ensure that jQuery is working, I added jQuery code to colorize the background. If background not slightly orangish, jQuery is not loading.

Did this fix it?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('body').css('background','wheat');
        $('#mybtn').on('click', function(e){
        alert('Button clicked'); //<==========================
        e.preventDefault();
        $('#mybtn').fadeOut(300);

        $.ajax({
            url: 'ajax.php',
            type: 'post',
            data: 'test=Hello',
            success: function(d){
                alert(d);
            }
        }); // end ajax call
    });
</script>

Then, you could get your PHP to echo what you sent, thus:

<?php
    $recd = $_POST['test'];
    echo 'PHP side received: ' . $recd;
?>

Why is my attempt at a basic Ajax script not working?

2 Answers2