Conditional statements based on PHP response via jQuery
My form is returning data from PHP via jQuery. How can I create conditional statements based on the response in jQuery.
This is the jQuery:
$.ajax({
type: "POST",
url: "createAlbum.php",
data: postData,
success: function(data){
$('#message').fadeIn();
$('#message').html(data);
}
});
This is what it is returning from PHP:
if($error) {
echo $error;
}
else {
echo $success;
}
So if the response is success, the message should hide after a few sec开发者_高级运维onds, but if it is an error, it should wait till the user corrects it. Something like this:
success: function(data){
$('#message').fadeIn();
$('#message').html(data);
if (data.response == 'success') {
alert('Success');
setTimeout(function() {
$('#message').fadeOut();
}, 5000 );
} else if (data.response == 'error') {
alert('Error');
}
}
Why don't you use the statusCode setting for your call to ajax() and have even more fine-grained control than just "success" and "error"? There are (or will be) many different ways your script could succeed or fail.
statusCode(added 1.5)Map Default: {}
A map of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:
$.ajax({ statusCode: { 404: function() { alert('page not found'); } } });If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error, they take the same parameters as the error callback.
UPDATE:
I've added an example of how to use statusCode instead of success and error settings for ajax() call in Jquery. First, the test UI:
<html>
<head>
<title>jQuery Test Page</title>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
function displayMessage(message){
$('#message').fadeIn();
$('#message').html(message);
}
function successFunction(data){
displayMessage(data);
}
function notFoundFunction(){
displayMessage("Not Found!");
}
function errorFunction(){
displayMessage("An Error Occurred!");
}
function invokeAjax(test){
$.ajax({
type: "POST",
url: "test.php?test="+test,
//data: postData,
statusCode: {
200: successFunction,
404: notFoundFunction,
500: errorFunction,
}
});
}
</script>
</head>
<body>
<h1 id="message" style="display:none;"></h1>
<a href="javascript:invokeAjax('success');">Invoke Ajax - Success (200)</a><br>
<a href="javascript:invokeAjax('notfound');">Invoke Ajax - Not Found (404)</a><br>
<a href="javascript:invokeAjax('error');">Invoke Ajax - Error (500)</a><br>
</body>
</html>
And here's the PHP script called by the Ajax:
<?php
$test = $_GET['test'];
if($test == 'success'){
echo 'some meaningful data';
} else if($test == 'notfound') {
http_send_status(404);
} else if($test == 'error'){
http_send_status(500);
}
?>
I think it's pretty self-explanatory, but if you have any further questions, don't hesitate to ask.
Of course, to get AJ's solution to work, you need to respond from the server to the client with the correct headers - http://no.php.net/manual/en/function.header.php:
header('HTTP/1.1 404 Not Found');
or
header('HTTP/1.1 500 Internal Server Error');
Here is a list of HTTP codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
Hope this helps :)
Thank you for your helpful answers. I solved it using JSON though!
PHP:
if($error) {
echo json_encode(array('success' => false, 'text' => $error));
}
else {
echo json_encode(array('success' => true, 'text' => $success));
}
jQuery:
if (data.success) {
alert('Success');
setTimeout(function() {
$('#message').fadeOut();
}, 5000 );
} else {
alert('Error ' + data.text);
}
加载中,请稍侯......
精彩评论