Using AJAX to run PHP code

Question

I have written some JavaScript code that will read from the Google Maps API and get a list of JSON objects. It will then convert each JSON object into an XML object. A co-worker needs this list converted to XML and then appended to an existing XML file and then save it to our server. So I wrote some PHP code to do that.

Now this is my first time working with PHP but I managed to write that PHP code easily enough. The next thing I am trying to do is write some javascript to run the PHP file and also send the XML object over to the PHP where it can append and save the XML. I figured I would use jQuery's $.ajax function. I started using a simple example trying to echo a string into some <pre> tags. So here is my code:

Javascript (Lies within index.php)

<script>
    var scriptString = 'THIS IS MY STRING';
    $('#clickMe').click(function(){
        $.ajax(
        {
            method:'get',
        url:'index.php',
        data:
        {
            'myString': scriptString
        }
        });
    });
    </script>

PHP & HTML (also lies within index.php)

<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<pre>
    <?php
        echo $_GET['myString'];
    ?>
</pre>

myString should show up in the <pre> tags once you click the clickMe div/button. It doesn't do that. — Nolski
– Nolski, Commented Aug 22, 2012 at 14:27

james · Accepted Answer · 2012-08-22 14:51:23Z

11

Don't include = in your data variable names (just say 'myString': scriptString)
Always include the form submission method for $.ajax ( method: 'get' )
In the PHP code, instead of $myString, use $_GET['myString']
Consider using a <button> instead of a <div> to send the data to the server - this is more standard.

But most importantly:

You're not actually doing anything with the returned data! You also need a success function in the $.ajax options that does something with the data from the server.

Try this code:

(JavaScript)

var scriptString = 'THIS IS MY STRING';
$('#clickMe').click(function(){
    $.ajax({
      method: 'get',
      url: 'index.php',
      data: {
        'myString': scriptString,
        'ajax': true
      },
      success: function(data) {
        $('#data').text(data);
      }
    });
});

(PHP and HTML)

<?php
if ($_GET['ajax']) {
  echo $_GET['myString'];
} else {
?>
<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<pre id="data"></pre>
<?php } ?>

Note that the PHP code will now do different things based on whether or not it is handling an AJAX request. For AJAX requests, you don't want to return the HTML for the page - just the data you're interested in. For this reason, it might be better to have two pages: one index.php page, and one ajax.php page which handles AJAX requests.

Also, in this simple examle, you could have just used a plain HTML form, which wouldn't require any JavaScript or AJAX.

edited Aug 22, 2012 at 14:51

answered Aug 22, 2012 at 14:19

james

13.4k9 gold badges50 silver badges74 bronze badges

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

7 Comments

Matt Over a year ago

You forgot to mention that @MikeNolan needs a success function to do "something" with the returned data.

Benjamin Gruenbaum Over a year ago

@Matt Yeah, either passing that as a parameter or using .done(success)

Nolski Over a year ago

The thing is when I echo that data (which it would on the clicking of that button) it should show up in the <pre> tags right? Or is there a command that I need to execute in the PHP to send the data back to the client?

james Over a year ago

Derp. Thanks Matt. It's the simple stuff that gets me.

Neminda Prabhashwara Over a year ago

One of the best answers I've seen

|

Collectives™ on Stack Overflow

Using AJAX to run PHP code

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related