JavaWeb_6-Ajax和JSON

Ajax(异步请求)全名(异步JavaScript和xml)

一、概念

JavaWeb_6-Ajax和JSON

都是jQuery中发送异步请求的方法

JavaWeb_6-Ajax和JSON

JavaWeb_6-Ajax和JSON

二、应用

2.1 get请求

JavaWeb_6-Ajax和JSON

给元素绑定事件

JavaWeb_6-Ajax和JSON

失去焦点时发送请求,这种叫做异步请求

JavaWeb_6-Ajax和JSON

注册

先根据opt判断是哪个页面,这样可以把同一类所有的异步请求写在一个servlet里面

JavaWeb_6-Ajax和JSON

JavaWeb_6-Ajax和JSON

用回调函数的参数来接收write的结果

JavaWeb_6-Ajax和JSON

Ajax用的好,不用el和jstl

就是尽量通过html和ajax和json来做页面,不要用jsp

  • 完成注册里验证码的功能:

2.2post请求

使用js对象的方式

JavaWeb_6-Ajax和JSON

2.3load

没有回调函数

异步请求:将获取的内容加载到每个元素内

JavaWeb_6-Ajax和JSON

2.4 ajax(可读性会更好)

成功调用success;失败调用error

JavaWeb_6-Ajax和JSONJavaWeb_6-Ajax和JSON

也可以修改为post请求

JavaWeb_6-Ajax和JSON

三、JSON

3.1创建JSON对象

如果返回的是个对象, 数组,集合,或者自定义的数据怎么解析,则要用JSON

js中对象

JavaWeb_6-Ajax和JSON

json格式 用来存储数据的一种格式,和js对象类似

里面的值:字符串,数字,数组,json格式数据

注意:属性必须加""

数组里可以再放对象

JavaWeb_6-Ajax和JSON

3.2 解析JSON对象

1.获取属性两种方式

JavaWeb_6-Ajax和JSON

2.属性为数组的话通过下标去获取

JavaWeb_6-Ajax和JSON

应用:通过JSON的方式来制作下拉列表

获取导入的js文件

JavaWeb_6-Ajax和JSON

html的select标签

JavaWeb_6-Ajax和JSON

标签里添加省份信息

JavaWeb_6-Ajax和JSON

绑定一个change事件

JavaWeb_6-Ajax和JSON

3.2在后端如何返回一个JSON格式的数据

1.如何把数据转换为JSON格式

导入jar包,创建一个test包,进行测试

JavaWeb_6-Ajax和JSON

自己创建JSON对象

JavaWeb_6-Ajax和JSON

转换为toString,打印结果为JSON格式(最终都是字符串或数组)

JavaWeb_6-Ajax和JSON

对象也可以往object里面放(不建议date直接往里丢,应该先转为字符串),对象名字相同时,会将他们合为一个数组

JavaWeb_6-Ajax和JSON

可以直接转成JSON格式,区别是没有key,这种情况是当数据只有这个对象时可以这么做

JavaWeb_6-Ajax和JSON

2.集合转换为JSON数组

JavaWeb_6-Ajax和JSON

会转换为数组的格式

JavaWeb_6-Ajax和JSON

JavaWeb_6-Ajax和JSON

注意:要会各种转换格式和自己定义JSON格式(重点)

  1. List集合转换成json代码

List list = newArrayList();

list.add( “first” );

list.add( “second” );

JSONArray jsonArray2 =JSONArray.fromObject( list );

  1. Map集合转换成json代码

Map map = newHashMap();

map.put(“name”,“json”);

map.put(“bool”,Boolean.TRUE);

map.put(“int”, newInteger(1));

map.put(“arr”, new String[] {“a”, “b” });

map.put(“func”, “function(i){return this.arr[i]; }”);

JSONObject json =JSONObject.fromObject(map);

  1. Bean转换成json代码

JSONObject jsonObject =JSONObject.fromObject(new JsonBean());

  1. 数组转换成json代码

boolean[] boolArray = newboolean[] { true, false, true };

JSONArray jsonArray1 =JSONArray.fromObject(boolArray);

  1. 一般数据转换成json代码

JSONArray jsonArray3 =JSONArray.fromObject("[‘json’,‘is’,‘easy’]" );

四、应用

4.1 用get,post,load发送的请求要进行转换,否则默认为tex

JavaWeb_6-Ajax和JSONt

JavaWeb_6-Ajax和JSON

获取不到

JavaWeb_6-Ajax和JSON

eval进行转换

JavaWeb_6-Ajax和JSON

这样太麻烦,用dataType,默认为text,改为json

JavaWeb_6-Ajax和JSON

4.2

用ajax和getJson发送的请求,可以直接去处理,不用进行转换

getJSON用的最多

进行字符串的拼接

JavaWeb_6-Ajax和JSON

功能:

鼠标悬浮显示购物车列表

订单列表详情展示