Demo: jQuery Ajax Call to PHP Script with JSON Return
Example
Favorite beverage: Favorite restaurant: Gender: JSON:
Usage
If you are running this locally, files must be running via a virtual server on your machine with PHP installed.
Reminder: Don't forget to include the jQuery library.
Put the following in the <head>:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Put the following in the <head>--> | |
| <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", //Relative or absolute path to response.php file | |
| data: data, | |
| success: function(data) { | |
| $(".the-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> | |
| <!--Put the following in the <body>--> | |
| <form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8"> | |
| <input type="text" name="favorite_restaurant" value="" placeholder="Favorite restaurant" /> | |
| <input type="text" name="favorite_beverage" 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="the-return"> | |
| [HTML is replaced when successful.] | |
| </div> |
- Full JSON return is accessed via data["json"]
- Individual JSON data can be accessed via data["name"]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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); | |
| } | |
| ?> |
