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>

Answer 1

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