Demo: jQuery Ajax Call to PHP Script with JSON Return

Question

I've tried out this tutorial http://labs.jonsuh.com/jquery-ajax-php-json/ but it's not working and I've followed exactly as the direction goes. i think it's because of the return.php.

index.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $(".js-ajax-php-json").submit(function(){
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "response.php", 
      data: data,
      success: function(data) {
        $(".return").json(
          "Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
        );

        alert("Form submitted successfully.\nReturned json: " + data["json"]);
      }
    });
    return false;
  });
});
</script>
</head>
<body>
<form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" />
  <input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" />
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <input type="submit" name="submit" value="Submit form"  />
</form>
 
<div class="return">
  [HTML is replaced when successful.]
</div>
</body>
</html>

response.php

<?php
if (is_ajax()) {
  if (isset($_POST["action"]) && !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']) && 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);
}
?>

If you check the console you'll see exactly what the issue is, whether it's a JS error stopping the request being sent, or a PHP error meaning the response is not coming back. — Rory McCrossan
– Rory McCrossan, Commented May 4, 2015 at 18:48
I tried changing the return.php into response.php many times. still it's not working — undercovermonkey
– undercovermonkey, Commented May 4, 2015 at 18:49
You are running this all on an actual server, right? Add error reporting to the top of your file(s) right after your opening <?php tag error_reporting(E_ALL); ini_set('display_errors', 1); — Jay Blanchard
– Jay Blanchard, Commented May 4, 2015 at 18:54
does it actually make the ajax request in the developer tools section of the browser. if not it will be a client side problem. If it is making the request then you should be die on a thread in response.php — Daryl B
– Daryl B, Commented May 4, 2015 at 18:56
@JayBlanchard yes I'm running it on localhost. i tried the error reporting but it's not doing anything. — undercovermonkey
– undercovermonkey, Commented May 4, 2015 at 19:02

michalh · Accepted Answer · 2015-05-04 19:00:43Z

This is how your html has to look like...

HTML:

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
      $(".js-ajax-php-json").submit(function(){
        var data = {
          "action": "test"
        };
        data = $(this).serialize() + "&" + $.param(data);
        $.ajax({
          type: "POST",
          dataType: "json",
          url: "response.php", 
          data: data,
          success: function(data) {
            $(".return").html(
              "Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
            );

            alert("Form submitted successfully.\nReturned json: " + data["json"]);
          }
        });
        return false;
      });
    });
    </script>
    </head>
    <body>
    <form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
      <input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" />
      <input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" />
      <select name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
      <input type="submit" name="submit" value="Submit form"  />
    </form>

    <div class="return">
      [HTML is replaced when successful.]
    </div>
    </body>
    </html>

PHP stays untouched as response.php

the magic change is

    $(".return").json(....)

in success callback to

    $(".return").html(....)

Collectives™ on Stack Overflow

Demo: jQuery Ajax Call to PHP Script with JSON Return

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related