初学AJAX,今天写一个表单验证,发现$.ajax()的success回调函数总是不会执行,而error毁掉函数则总是执行。
我是先POST表单账号密码给php文件,该php文件返回数据(我直接返回了常量供自己测试),然后在JS里获得data.login_email。
发现data.login_email得到的总是undefined,为什么呢?由于对JSON格式不是很熟悉,所以不断调试不断查资料,最后发现:
原来自1.4版本的jQuery开始,JSON写的不规范可能导致错误!
“json”: Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. (See json.org for more information on proper JSON formatting.
查资料学习了JSON格式后,修改后台php代码为:
[php]
<?php
header(‘Content-type: text/json’);
$results = array (
"login_email" => "0",
"login_password" =>" 0"
);
echo json_encode($results);
?>
[/php]
$(‘#login-btn’).click(function(){
var emailVal = $(‘#login-email’).val();
var passwordVal = $(‘#login-password’).val();
//点击登陆按钮时进行验证
$.ajax({
type: "POST",
data:{"emailVal":emailVal,"passwordVal":passwordVal},
dataType: "JSON",//原来声明了json数据类型就必须严格书写JSON!
url: "login_check.php",
success: function(data){
if(data.login_email==0){//邮箱错误
$(‘#login #login-email’).prev().show();
$(‘#login #login-email’).parent().parent().addClass(‘warning’);
}
if(data.login_password==0){//密码错误
$('#login #login-password').prev().show();
$(‘#login #login-password’).parent().parent().addClass(‘error’);
}
},error:function(XMLResponse){
alert("出错!错误信息为"+XMLResponse.responseText)}
});
return false;//禁止登陆按钮的默认行为
});//click()结束
[/javascript]
data:{"emailVal":emailVal,"passwordVal":passwordVal}
[/javascript]
<?php
header(‘Content-type: text/json’);
$results=array("a" => "apple", "b" => "banana", "o" => "orange");
echo json_encode($results);
?>
[/php]
— 2013-10-05 更新—-
注意JSON字符串与JSON对象的区分:
[javascript]
// 这是JSON字符串
var foo = ‘{ "prop": "val" }’;
// 这是对象字面量
var bar = { "prop": "val" };
[/javascript]
JSON有非常严格的语法,在string上下文里{ “prop”: “val” } 是个合法的JSON,但{ prop: “val” }和{ ‘prop’: ‘val’ }确实不合法的。所有属性名称和它的值都必须用双引号引住,不能使用单引号。另外,即便你用了转义以后的单引号也是不合法的。
参考:根本没有”JSON”对象这回事