title: Demo: jQuery Ajax Call to PHP Script with JSON Return
body: <p>I've tried out this tutorial <a href="http://labs.jonsuh.com/jquery-ajax-php-json/" rel="nofollow">http://labs.jonsuh.com/jquery-ajax-php-json/</a> but it's not working and I've followed exactly as the direction goes. i think it's because of the return.php. </p>
  
  <p>index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $("document").ready(function(){
    $(".js-ajax-php-json").submit(function(){
      var data = {
        "action": "test"
      };
      data = $(this).serialize() + "&amp;" + $.param(data);
      $.ajax({
        type: "POST",
        dataType: "json",
        url: "response.php", 
        data: data,
        success: function(data) {
          $(".return").json(
            "Favorite beverage: " + data["favorite_beverage"] + "&lt;br /&gt;Favorite restaurant: " + data["favorite_restaurant"] + "&lt;br /&gt;Gender: " + data["gender"] + "&lt;br /&gt;JSON: " + data["json"]
          );
  
          alert("Form submitted successfully.\nReturned json: " + data["json"]);
        }
      });
      return false;
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8"&gt;
    &lt;input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" /&gt;
    &lt;input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" /&gt;
    &lt;select name="gender"&gt;
      &lt;option value="male"&gt;Male&lt;/option&gt;
      &lt;option value="female"&gt;Female&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="submit" name="submit" value="Submit form"  /&gt;
  &lt;/form&gt;
   
  &lt;div class="return"&gt;
    [HTML is replaced when successful.]
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>response.php</p>
  
  <pre><code>&lt;?php
  if (is_ajax()) {
    if (isset($_POST["action"]) &amp;&amp; !empty($_POST["action"])) { //Checks if action value exists
      $action = $_POST["action"];
      switch($action) { //Switch case for value of action
        case "test": test_function(); break;
      }
    }
  }
  
  //Function to check if the request is an AJAX request
  function is_ajax() {
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
  }
  
  function test_function(){
    $return = $_POST;
  
    //Do what you need to do with the info. The following are some examples.
    //if ($return["favorite_beverage"] == ""){
    //  $return["favorite_beverage"] = "Coke";
    //}
    //$return["favorite_restaurant"] = "McDonald's";
  
    $return["json"] = json_encode($return);
    echo json_encode($return);
  }
  ?&gt;
  </code></pre>