JQuery AJAX call to php function

Question

I am trying to replace page reloading PHP scripts in a web page with AJAX calls.

I am using JQuery to run the AJAX scripts but it doesn't seem to be doing anything so I attempted to write an incredibly basic script just to test it.

My directory is as follows

public_html/index.php
           /scripts/phpfunctions.php
                   /jqueryfunctions.js

index.php contains

<!DOCTYPE html>
<html>
<head>

    <!-- jquery functions -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="scripts/jqueryfunctions.js"></script>

    <!-- php functions -->
    <?php include 'scripts/phpfunctions.php' ?>

</head>

<body>
    <button type="button" id="testButt">TEST</button>
</body>

</html>

Then the phpfunctions.php page which I am trying to call contains just an echo if an argument is set

<?php

    if(isset($_GET["action"])) {
        echo "test has been run";
    }

?>

The jqueryfunctions.js script I am trying to run is

$(document).read(function () {
    $('#testButt').on('click', function () {
        console.log("jquery call worked"); // this bit does run when button is clicked
        $.ajax({ // this bit doesn't seem to do anything
            url: 'scripts/phpfunctions.php?action=run_test',
            type: 'GET',
            success: function (data) {
                $('#ajaxdata').html(data);
            },
            error: function (log) {
                console.log(log.message);
            }
        });
    });
});

I see that the jqueryfunctions.js function is being called by the first console.log but it doesn't seem to be calling my phpfunctions.php function.

I was expecting to see the php echo "test has been run" but this doesn't happen.

Did I miss something?

Just pointing out, you have missed the closing > off the end body tag, this could be an issue — anon
– anon, Commented Nov 19, 2015 at 10:38
As pointed out by @Jai you don't have a <div id="ajaxdata"> in your body. So the AJAX call is probably running, and successful, but it is trying to display the data in an element that does not exist. — ImClarky
– ImClarky, Commented Nov 19, 2015 at 10:58

Jai · Accepted Answer · 2015-11-19 10:50:13Z

2

You should use isset() method:

<?php
    if(isset($_GET["action"])) {
       if($_GET["action"] == "run_test") {
          echo "test has been run";
       }
    }
?>

and if you are using ajax then why do you need to include it on index page:

<?php include 'scripts/phpfunctions.php' ?>

and i can't find this element $('#ajaxdata') on your index page.

Also you can check the network tab of your inspector tool to see the xhr request to the phpfunctions.php and see if this gets successfull or there is any error.

edited Nov 19, 2015 at 10:50

answered Nov 19, 2015 at 10:39

Jai

74.8k12 gold badges76 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheLovelySausage Over a year ago

I didn't realize the success function was trying to place it into an existing element. Is it possible to store the result in a variable instead of populating an element?

Jai Over a year ago

@Trent yes you can have a global variable and that can be used to store it but thing to remember you should have to use promises then.

Touqeer Shafi · Accepted Answer · 2015-11-19 10:35:13Z

I think problem is here:

$(document).read(function() {

    $('#testButt').on('click', function() {

        console.log("jquery call worked"); // this bit does run when button is clicked

        $.ajax({   // this bit doesn't seem to do anything
            url: 'scripts/phpfunctions.php',
            type: 'GET',
            data: {action:'run_test'}, // <------ Here
            success: function(data) {
                $('#ajaxdata').html(data);
            },
            error: function(log) {
                console.log(log.message);
            }
        });

    });

});

jQuery says:

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting.

So you should set data: {key:'value'}

Not quite. You can use both notation. You can give directly a query string or an object that jQuery will convert to a query string, so "var1=1&var2=2" work like {var1: 1, var2: 2}. Both are ok
I am a bit disputed on whether to use this method to pass an argument or the one @sam swift suggested (passing it in the URL)

anon · Accepted Answer · 2015-11-19 10:42:04Z

Most things look fine, but your data attribute is designed for "POST" requests, try to add the data to the url as follows:

$( document ).read( function ()
{
    $( '#testButt' ).on( 'click', function ()
    {
        console.log( "jquery call worked" ); // this bit does run when button is clicked
        $.ajax( {   // this bit doesn't seem to do anything
            url: 'scripts/phpfunctions.php?action=run_test', // Add the GET request to the end of the URL
            type: 'GET',
            //data: 'action=run_test', Unrequired noise :P (this is for post requests...)
            success: function ( data )
            {
                $( '#ajaxdata' ).html( data );
            },
            error: function ( log )
            {
                console.log( log.message );
            }
        } );
    } );
} );

And also (as mentioned in my comments), you need to finish your bodys closing tag:

</body> <!-- Add the closing > in :P -->

</html>

I hope this helps :)

Unrequired noise :P (this is for post requests...) are you sure?
that is automatically done by jquery ajax if req is get then it sends data in the url and if is post then it won't be send in the url.

RiccardoC · Accepted Answer · 2015-11-19 10:40:24Z

0

Where do you load ajaxfunctions.js? It look like in your code you never load the resource And change

<button id="xxx">

In

<button type="button" id="xxx">

So the page isn't reloaded

answered Nov 19, 2015 at 10:40

RiccardoC

8665 silver badges10 bronze badges

4 Comments

Jai Over a year ago

that is not in the form so reload doesn't happens.

RiccardoC Over a year ago

Oh, yes, thus the problem must be that ajaxfunctions.js is never loaded in the page

anon Over a year ago

I've used AJAX many a time without type="button", IMO, this isn;t needed

RiccardoC Over a year ago

Sure, if it isn't in a form you're completely right, my mistake

Collectives™ on Stack Overflow

JQuery AJAX call to php function

4 Answers 4

2 Comments

2 Comments

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

4 Comments

Related