一、JSON对象与JSON字符串
JSON：轻量级的数据交换格式
1、JSON对象：JSON对象就是键值对的集合，键与值之间用:分隔，多对键值对之间用,分隔
注意：JSON对象，要求键必须使用""包裹的字符串。''无效！！！
2、JSON字符串：将JSON对象，用字符串的形式进行包裹。
3、JSON对象与JSON字符串的相互转换：
① 对象-->字符串 JSON.stringify(obj)
② 字符串-->对象 JSON.parse(jsobj)
JQuery也提供了字符串转对象的方法：$.parseJSON(jsobj);
4、JSON数组：将多个JSON对象组成数组的形式存放
JSON数组可以和JSON对象相互嵌套，也就是说JSON对象的值可以是JSON数组。
.load()：选中当前页面的一个DOM节点，并在当前DOM节点中加载一块HTML代码片段：
接受参数：
① 可以是一个HTML文件的地址，表示将整个的html文件加载到当前区域：
$("div1").load("test.html");
② 可以是一个html文件+各种选择器，表示选择该页的指定区域进行加载
$("#div1").load("test.html",h1,"ul",function(){alert("完成")});
二、$.ajax()；是JQuery中最底层的ajax函数。参数接受一个大对象，用对象的键值对表示ajax请求的相关设置：
① type：表示Ajax请求的方法，可以get和post
② url：表示请求的后台URL地址
$.ajax({
type:"get",
url:"java1801.json",
data:{
"name":"张三"
},
async:true,
}
③ success：表示请求成功的回调函数。回调函数将接受三个参数，其中第一个参数是请求成功返回的数据。
success:function(data,textStatus,jqXHR){
var obj=JSON.parse(data);
console.log(obj);
console.log(data);
console.log(textStatus);
console.log(jqXHR);
console.log(jqXHR.responseText);
console.log(jqXHR.responseXML);
},
使用数据时需注意：返回的对象是JSON字符串，还是JSON对象。
④ error：表示请求失败时，执行的回调函数。
error:function(XMLHttpRequest,textStatus,errorThrow){
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrow);
}
⑤ complete：请求完成后，无论成功失败都会执行的函数
complete:function(XHR,TS){
console.log(XHR.status);
console.log(TS);
}
⑥ statusCode: 接收一个对象，对象的键是各种status状态，对象的值表示每种状态码对应的回调函数。
[常见状态码]
200-请求成功
404-页面没找到
500-服务器错误
403-访问被拒绝
statusCode:{
200:function(){
console.log("请求成功");
},
404:function(){
console.log("页面没找到");
}
}
⑦ async：设为true表示异步请求（默认），设为false表示同步请求
⑧ data：请求时，向后台传递的数据，是一个对象类型，以键值对的形式分别表示name:value。
⑨ dataType：预期服务器返回的数据类型。常见json、text、html
⑩ timeout：设置请求超时时间。
三、JS同源策略
在JS中当请求其他文件时，要求被请求文件与当前文件，必须处于同一协议名、同一主机名、同一端口号下。
否则，请求将不能成功！！如果要请求非同源文件，必须进行跨域请求设置
$(function(){
$.get("java1801.json",{name:"zhangsan"},function(data){
console.log(data);
},"json");
四、ajax中用于检测页面所有Ajax的状态，并执行回调函数的方法
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)
ajaxStart(callback)
ajaxStop(callback)
ajaxSuccess(callback)
五、表单序列化为字符串
$("form input[type='button']:eq(0)").on("click",function(){
//var str=$("form:eq(0)").serialize();
//console.log(str);
var userName=$("form input[name='userName']:eq(0)").val();
var pwd=$("form input[name='pwd']:eq(0)").val();
var obj={
"userName":userName,
"pwd":pwd
};
console.log(JSON.stringify(obj));
});
六、表单序列化为数组
$("form input[type='button']:eq(1)").on("click",function(){
var arr=$("form:eq(0)").serializeArray();
var obj={};
arr.forEach(function(item,index){
obj[item.name]=item.value;
});
console.log(JSON.stringify(obj));
});
七、validate插件的使用
插件下载：http://www.runoob.com/jquery/jquery-plugin-validate.html
实例代码
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cls{
color: red;
font-size: 12px;
}
</style>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.min.js"></script>
</head>
<body>
<form id="form">
用户名：<input type="text" name="userName"/><br/>
密码：<input type="password" name="password" id="pwd"/><br/>
确认密码：<input type="password" name="confirm_password" id="confirm_password"/><br/>
邮箱：<input type="text" name="email"/><br/>
<input type="submit" value="提交"/><br/>
</form>
<script type="text/javascript">
$("#form").validate({
errorPlacement: function(error, element) {
error.insertAfter(element);
error.css({
"color": "red",
"fontSize": "12px",
"position":"absolute",
"right":"0px"
})
},
// errorClass:"cls",
rules:{
userName:{
required:true,
rangelength:[3,16]
},
password:{
required:true,
minlength:5
},
confirm_password:{
required:true,
minlength:5,
equalTo:"#pwd"
}
},
messages:{
confirm_password:{
equalTo: "两次密码输入不一致"
}
}
});
</script>
</body>