<div class="the-return"> | |
[HTML is replaced when successful.] | |
</div> |
<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 <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> |
<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> |
<?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 comment has been minimized.
This comment has been minimized.
Thank you for wasting an hour of my time trying to get a tutorial with a bug to work. Not explaining anything about 'return,php' makes this useless. |
This comment has been minimized.
This comment has been minimized.
You don't actually have to do anything with the <script>
$(document).ready(function(){
$("#button").on("click", function(){
// Data serialization and AJAX request here
});
});
</script> |
This comment has been minimized.
This comment has been minimized.
create two files <!doctype html> <title>ajax-exam</title> <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", //Relative or absolute path to response.php file data: data, success: function(data) { $(".the-return").html( "Favorite beverage: " + data["favorite_beverage"] + "Favorite restaurant: " + data["favorite_restaurant"] + " Gender: " + data["gender"] + " JSON: " + data["json"] ); alert("Form submitted successfully.\nReturned json: " + data["json"]); } }); return false; }); }); </script> Male Female
[HTML is replaced when successful.]
2.response.php define("BASE_URL", "http://" . $_SERVER['HTTP_HOST'] . "/" . "ajax/ajax-exam/"); define your response.php file path run the index.php file |
This comment has been minimized.
This comment has been minimized.
Is thi working code. I think this is very complex return JSON.
for reference - |
This comment has been minimized.
This comment has been minimized.
$return["json"] = json_encode($return); Don't need to assign anything to $return['json']. |
This comment has been minimized.
This comment has been minimized.
Here is a git repository ( https://github.com/pavanyogi/return-json-response-to-ajax-call-php ), which I forked from the above gist with minimum code and simplified instructions. Feel free to use and suggestions (if you have any). |
This comment has been minimized.
This comment has been minimized.
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(){") |
This comment has been minimized.
what is the "return.php"?
In html form, the from's action is "return.php".