Last active
September 17, 2022 02:57
-
-
Save jonsuh/3739844 to your computer and use it in GitHub Desktop.
jQuery AJAX Call to PHP Script with JSON Return
This file contains 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
| <div class="the-return"> | |
| [HTML is replaced when successful.] | |
| </div> |
This file contains 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
| <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> |
This file contains 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> |
This file contains 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
| <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> |
This file contains 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); | |
| } | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
just remove |action="return.php"| from form's markup as it doesn't effect anything (because of "return false;" in "$(".js-ajax-php-json").submit(function(){")