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);
}
?>
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(....)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.