JSON：
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。
01.1_JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
01.2_JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
“name”:“Runoob”
02.1_json对象的格式：
JSON字符串的格式比较严格：键要使用双引号引起来。
格式： {“键”:值,“键”:值,“键”:值,“键”:值}
键都是字符串类型
值可以是多种类型：字符串，布尔 数组 json对象 函数
var student={“name”:“詹姆斯”,“age”:23,“sex”:“男”,“eat”:function(){alert(“吃饭”)}};
01.3_相关函数
| 函数 | 描述 |
|---|---|
| JSON.parse() | 用于将一个 JSON 字符串转换为 JavaScript 对象。 |
| JSON.stringify() | 用于将 JavaScript 值转换为 JSON 字符串。 |
03.1_JSON字符串转成JSON对象
var obj=JSON.parse(jsonObj2);
alert(obj.name);
03.2_JSON对象转换成JSON字符串
var jsonObj={“name”:“张三”,“age”:23};
var jsonStr=JSON.stringify(jsonObj);
01.4_JSON对象的遍历
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var person={
"name":"詹姆斯",
"age":23,
"sex":"男",
"sal":500.5
}
// JSon对象的遍历
for(key in person){
var v=person[key];
document.write(v);
}
var arr=[1,2,3,4,5];
for(index in arr){
var a=arr[index];
document.write(a);
}
// 对象数组
var jsonArr=[{
"name":"詹姆斯",
"age":23,
"sex":"男",
"sal":500.5
},
{
"name":"韦德",
"age":23,
"sex":"男",
"sal":500.5
},
{
"name":"安东尼",
"age":23,
"sex":"男",
"sal":500.5
},]
// 遍历数组
for(var i=0;i<jsonArr.length;i++){
var json=jsonArr[i];
for(key in json){
var js=json[key];
document.write(js);
}
}
</script>
01.5_JSON数据的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
/*
*/
var person = {
"name": "张三",
"age": 23,
"sex": "男",
"sal": 500.5
}
//取JSON中的数据，键找值
var age = person.age;
alert(age);
//JSON数据嵌套
var person2 = {
"name": "张三",
"age": 23,
"sex": "男",
"sal": 500.5,
"car": {
"pinpai": "奔驰",
"color": "白色",
"price": 20000
},
"arr":[100,200,300,400]
}
var p=person2.car.price;
alert(p);
var arr=person2.arr;
alert(arr[arr.length-1]);
//JOSN数组
var jsonArr=[{
"name": "张三",
"age": 23,
"sex": "男",
"sal": 500.5
},{
"name": "李四",
"age": 24,
"sex": "女",
"sal": 500.5
},{
"name":"王五",
"age": 25,
"sex": "男",
"sal": 500.5
}];
for(var i=0;i<jsonArr.length;i++){
//alert(jsonArr[i]);
}
</script>
02_JSONP跨域请求
说明：
有的时候我们需要跨域请求，但是我们如果跨域，浏览处于同源策略的安全考虑，
会把服务器返回的数据进行劫持，导致我们的Ajax请求，拿不到服务器返回的数据
我们就得想办法解决。
有两个方案来解决跨域请求 一种是JSONP 一种Crose跨域。
02.1_原生的Ajax请求之get方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" οnclick="sendAjax()">发送Ajax请求</button>
</body>
</html>
<script type="text/javascript">
function sendAjax() {
//创建Ajax请对象
var xmlhttp = new XMLHttpRequest();
//发送请求:get请求 他的请求参数，拼接在url后面
xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=1", true);
xmlhttp.send()
//接收响应
xmlhttp.onreadystatechange = function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
02.2_原生的Ajax请求之Post请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="sendAjax()">发送Ajax请求</button>
</body>
</html>
<script type="text/javascript">
function sendAjax() {
//创建Ajax请对象
var xmlhttp = new XMLHttpRequest();
//发送请求:post请求 他的请求参数,放在请求体里面来提交的，所以一般不在url后面拼接
xmlhttp.open("POST", "http://localhost:8080/PostDemo_war_exploded/demo", true);
//3.设置请求头信息
xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xmlhttp.send("username=zhangsan&password=123456")
//接收响应
xmlhttp.onreadystatechange = function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
var jsonObj=JSON.parse(responseText);
//alert(jsonObj);
alert(jsonObj.username);
}
}
}
</script>
02.3_JQuery封装后的Ajax
JQeury实现方式
1. $.ajax()
* 语法：$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
2. $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
3. $.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
4.直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback])
* url：请求路径
* data：请求参数
* callback：回调函数
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
02.4_JQuery 封装过后的JSONP请求
$.ajax({
type:"GET",
url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
data:{tel:"13259141515"},
jsonp:"callback", //jsonp 请求 回调函数名Jqurey会自动生成
success:function(res){
alert(res.catName);
},
dataType:"jsonp"
});
02.5_getJSON() 方法简化 jsonp 请求
$.getJSON("https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=?",function(res){
alert(res.catName);
});
Jquery还有简化的JSONP请求
getJSON() 他可以判断你是跨域请求，还是非跨域请求，都能处理
callback=? 回调函数名给个？ 让Jquery随机生成一个回调函数名
02.6_Java中JSON字符串和Java对象的互相转换
JSON数据和Java对象的相互转换
* JSON解析器：
* 常见的解析器：Jsonlib，Gson，fastjson，jackson
1. Java对象转换JSON
1. 使用步骤：
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
1. 转换方法：
* writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
* writeValueAsString(obj):将对象转为json字符串
2. 注解：
1. @JsonIgnore：排除某个属性不要转换成JSON,给类的属性上加上这个注解。
2. @JsonFormat：属性值得格式化日期字符串，取的是默认时区的时间
* @JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")//给默认时区加上8个小时
3. 复杂java对象转换
1. List：数组
2. Map：对象格式一致
2. JSON转为Java对象
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
1. readValue(json字符串数据,Class)
* Ajax的应用:校验用户名是否存在
1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
1. $.get(type):将最后一个参数type指定为"json"
2. 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");
//设置跨域请求
response.setHeader("Access-Control-Allow-Origin","*");
扫一扫
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
