ajax概念

ajax:
js中的异步提交;
同步:客户端向服务器发送一次请求,需要等待服务器响应后,才能发送第二次请求.就是刷新这个页面;
异步:客户端向服务器发送一次请求,无需等待响应,就可以继续发送多次请求;局部刷新;

ajax优点:
1.使用js技术向服务器发送异步请求.
2.无需刷新整个页面.
3.响应内容不再是整个页面,而是页面中的局部,所以性能高.

ajax的缺点:
1.并不适合所有场景,大多数时候,还需要使用同步;
2.因为无需等待,就可以发送请求,所以无形中对服务器造成了压力;
3.因为ajax是前端的技术,所以要考虑浏览器的兼容性;

get
post
ajax

ajax书写格式:
$.ajax({
type:“post”, //提交的请求方式
url:"/项目名称/url路径", //提交到后台的路径(也可以是页面)
data:{“需要往后台传递的参数” : 参数的值(可以是Object类型)},//向后台传递的数据
dataType:“一般是json”,
success:function(data){ //后台响应的数据
//成功后的逻辑
},
error:function(msg){
//失败后的逻辑
}
});

案例1:
校验数据的有效性:

页面:
	设计一个输入框,给一个id;
	
js代码:
	1.使用jquery技术导入jquery的js库;
	2.在新的script标签中写js代码;
	3.使用jquery的书写格式,在页面加载时加载此函数$(function(){});
	4.在页面输入框失去焦点的时候,触发一个事件;blur(function(){});
	5.在函数中使用ajax,把页面输入框的参数(var 参数=$(选择器).val();)传递到后台(servlet);
	6.从后台把参数拿到数据库中校验;
	7.把校验的结果,响应给ajax中的success参数中;
	8.判断data数据,来选择js程序的结果;

案例2:
删除时弹出一个框,当点击框中确定的时候就执行局部删除,当点击取消时,将不执行删除:

页面:
	一个查询列表页面,在页面中设计一个<a></a>或者是按钮
	<a></a>或者按钮:因为是多个,设计使用class,需要把参数设置为属性(uid=${list.id})

js代码:
	1.使用jquery技术导入jquery的js库;
	2.在新的script标签中写js代码;
	3.使用jquery的书写格式,在页面加载时加载此函数$(function(){});
	4.在点击删除的时候,触发一个事件;click(function(){});
	5.使用window.confirm("提示内容");弹出一个框;还有一个boolean的返回值;
	6.判断返回值:
		true:进入ajax:
			 1>获取<a></a>的对象,使用对象拿到属性的值;把值使用ajax传递到后台;
			 2>在后台执行删除,看返回值是否=0;如果!=0就向页面响应数据
			 3>在ajax的success中拿到data进行判断,做出响应的逻辑
			 4>如果删除成功,在页面使用: 对象.parents("tr").remove(); 移除该行
			 5>如果是在分页的情况下,需要刷新页面(window.location.href=window.location.href);
		false:直接提示取消删除

案例3:
省级联动:
在选择省下拉框中的某个选项的时候,就查询所有市,并查询所有县

页面:
	3个下拉框:
		省:设置id 并且使用同步提交(查询全表,返回list),在下拉框中遍历
		市:设置id
		县:设置id
		
js代码:
	1.使用jquery技术导入jquery的js库;
	2.在新的script标签中写js代码;
	3.使用jquery的书写格式,在页面加载时加载此函数$(function(){});
	4.使用id选择器,控制省下拉框,并绑定一个事件(当下拉框中选项发送改变时,触发)(change(function(){}))
		进入该函数之后就把后面联动的市中的数据清空:$("#shi").html("");
	5.使用ajax异步提交,传入参数是所选的省的某一项的值(var shengId=$(this).val())
	6.success中返回的参数是从后台查出的所有市的集合(在后台servlet中转为json格式的json串)
	7.遍历集合(数组),取出集合中的属性,就是根据(下标.属性)(data[i].shiid)
	  (这里遍历的结果需要追加到页面上的select标签中的option标签中)(append())
	  这里需要调用市县联动的方法:使用一个函数来完成:
			$("#shi").trigger("change");//参数是需要执行事件的类型
	
	8.写市和县的联动(和省市的方法查不多)
		进入该函数之后就把后面联动的县中的数据清空:$("xian").html("");
		入参是:shiId
		出参是:在后台查出的所有县的集合(以json格式的json串)
		遍历集合,把信息追加到select标签中的option标签中

java代码:
3个servlet:
FindShengServlet:完成查询所有省的list集合,放到request域中

FindShiServlet:完成根据省id查询所有市的集合,把集合以json串的格式响应到页面的ajax中list集合转json串:JSON.toJSONString(list);
sql语句:select * from shi,ss where shi.shiid=ss.shiid and ss.sid=?(在前台传入的省id)

FindXianServlet:完成根据市id查询所有县的集合,把集合以json串的格式响应到页面的ajax中list集合转json串:JSON.toJSONString(list);
sql语句:select * from xian,sx where xian.xianid=sx.xianid and sx.shiid=?(从前台传入的市id)

猜你喜欢