黑马程序员技术交流社区
标题: 【石家庄校区】AJax&JSON [打印本页]
作者: heifachangcun 时间: 2019-1-11 14:42
标题: 【石家庄校区】AJax&JSON
本帖最后由 小石姐姐 于 2019-1-17 09:52 编辑
AJax(**异步,局部刷新**)
概念:
英文全拼:ASynchronous JavaScript And XML 异步的JavaScript和XML
1.异步和同步:客户端和服务器端相互通信的基础上
同步请求:
客户端必须等待服务器端的响应,在等待期间客户端不能做其他操作
异步(可理解为多线程)请求:
客户端不需要等待服务器端的响应,在服务器处理请求的过程中,客户端可以去进行其他的操作
**AJax支持异步请求,也支持同步请求.
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术;通过在后台与服务器进行少量数据交换,Ajax可以使
网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新;传统的网页(不适用Ajax)如果需要
更新内容,必须重载整个网页页面.
*注:对网页主体不影响的情况下,对局部内容进行刷新
作用:提升用户的体验
实现方式
1.原生的JS实现方式(了解)
ajax也支持同步请求
2.JQuery实现方式
1.$.ajax()发送异步请求
语法:
[Java] 纯文本查看 复制代码
$.ajax({键值对});
"type":"post/get", //请求方式
"url":"xxx", //请求路径
"data":"xxx=xxx & xxx=xxx", //请求参数
或{"xxx":"xxx","xxx":"xxx"}
如:data:{"username":"jack","age":23},-->推荐使用
"success":function(data){}, //表示响应成功会执行的回调函数
//data代表的是服务器返回的数据
"error":function(data){}, //表示如果请求出错,会执行的回调函数
dataType:"text/json/jsonp" //设置接收到的响应数据的格式
注意:如果不写dataType默认按服务器的响应头Content-Type来决定,MIME类型
dataType
Text :文本
json:json格式
jsonp:解决跨域问题 cross domain
2.$.get()-->发送get请求
语法:
[Java] 纯文本查看 复制代码
$.get(url,[data],[callback],[type])
url:请求路径
data:请求参数
"xxx=xxx & xxx= xxx", //请求参数
或{"xxx":"xxx","xxx":"xxx"}
callback:回调函数
type:请求参数
text/json
3.$.post()-->发送post请求
语法:
[Java] 纯文本查看 复制代码
$.post(url,[data],[callback],[type])
url:请求路径
data:请求参数
callback:回调函数
type:请求参数
****JSON
1.概念 JavaScript Object Notation JavaScript对象表示法
*本质:js对象 --->对象.属性--->获取值
如: var p = {"name": "张三","age":"23"};
Json现多用于存储和交换文本信息的语法
进行数据的传输
*json作为一种数据协议的格式
2.语法:
1.规则:
1.数据在名称值对中:json数据是由键值对构成的
键用引号(单双皆可)引起来
值的取值类型
1.数字
2.字符串
3.逻辑值(true/false)
4.数组(在方括号中)
5.对象(在花括号中)
6.null
2.数据由逗号分隔
多个键值对由逗号分隔
3.花括号保存对象
使用{}定义json格式 {"address":{"province"："陕西"....}}
4.方括号保存数组
[] {"persons":[{},{}]}
使用:
嵌套格式:
第一种: {}->[]
例子:[Java] 纯文本查看 复制代码
var person = {
persons:[{"name":"李四","age":25,"gender":"male"},
{"name":"张三","age":26,"gender":"male"},
{"name":"王五","age":30,"gender":"female"}
]
};
第二种: []->{}
例子[Java] 纯文本查看 复制代码
:var persons = [{"name":"李四","age":25,"gender":"male"},
{"name":"掌柜三","age":29,"gender":"female"},
{"name":"貂蝉","age":68,"gender":"male"}
]
注意:看到大括号开头代表json对象
对象.属性
看到中括号代表数组
数组[索引].属性
如果括号被引号引起来,就不再是对象或数组,而是字符串了
2.获取数据
基本获取:
1.json对象.键名
2.json对象["键名"]
3.[]->{}:数组对象[索引].键名
另注嵌套{}->[]:数组对象.数组键名[索引].键名
遍历获取:
遍历获取数组的值
例子: [Java] 纯文本查看 复制代码
var ps = [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
];
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps;
for(var key in p){
alert(key+":"+p[key]);
}
}
3.JSON数据和Java对象的相互转换
JSON解析器:封装好的工具类
Jsonlib-->官方的
Gson -->谷歌
fastjson-->阿里
jackson -->springMVC默认的
1.JSON转为Java对象(了解)
使用步骤
1.导入jackson相关jar包
2.创建Jackson核心对象objectMapper
3.调用objectMapper的相关方法进行转换
1.readValue(json字符串数据,Class类型)
2.Java对象转为JSON
使用步骤
1.导入jackson相关jar包
2.创建Jackson核心对象objectMapper
3.调用objectMapper的相关方法进行转换
转换方法
writeValue(参数1,obj):
参数1:
[Java] 纯文本查看 复制代码
File:将obj对象转换为json字符串,并保存到制定文件中
new File("保存路径")
Writer:将obj对象转换为json字符串,将json数据填充到字符输出流中
OutputStream:将obj对象转换为json字符串,将json数据填充到字节输出流中
writeValueAsString(obj):将对象转为json字符串
**jackson api
ObjectMapper mapper = new Objectmapper;
mapper.writeValueAsString(对象)
或
mapper.writeValue(输出流,对象)
注解
1.@JsonIgnore:排除属性
2.@JsonFormat():属性值格式化
参数:pattern="yyyy-MM-dd"
复杂Java对象转换
1.list集合
数组:[{},{}]
2.map集合
和对象一致:{key:value,key:value}
案例:校验用户名是否存在
1.服务器响应的数据,在客户端使用时,要想当做json数据格式使用时
1.$,get(type):将最后一个参数type指定为"json"
2.response.setContentType("application/json;charset=utf-8")
手动将字符串转为json
3.JSON.parse(data)
4.eval("("+data+")")
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |