Java周结之ajax

本篇博客主要讲解三个问题。

1.什么是ajax
2.从后台如何用json格式向jsp页面传多个不同的对象
3.jsp页面如何向后台发送多个对象

1.ajax

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

2.从后台到jsp界面传值

2.1咋们通过一个实例来了解。

下面是数据库里的三张表，我需要从库里同时取到2-1、2-2、2-3三张表才能显示出一个完整的线路信息。完整的线路如2-4图所示。

线路表2-1 线路类型2-2 图片地址1表2-3 完整信息图2-4

2.1 具体实现

  开始是打算写几个嵌套的ajax。先取出线路类型表的数据，再通过线路类型的ID取到相应的线路信息，然后通过线路ID取到全部的图片信息。发现逻辑写完后实现不了。就很疑惑这是为什么。冷静下来发现是因为ajax是异步的，不会按从上到下的执行。也就是说我不能一步一步的取到值。除非取消ajax的异步方式 async:false。 这就太蠢了点了，还会影响我页面的加载速度。
  因此我们就需要将三张表的数据一同返回界面再进行解析了。实现思路，将三张表的数据保存为json字符串格式，通过特殊的字符连接在一起。最后返回给界面。
如：数据1+"&"+数据2+"&"+数据3…
（1）servlet将数据转json格式

{
response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String method = request.getParameter("method");//接受查询选择变量
		String result = null;	//存放结果字符串的变量
		if (method.equals("selectLTP")) {
			result = selectLineTypeAll()+"&"+selectLineAll()+"&"+selectAllPicture();//拼接json字符串
		}
		out.print(result);//返回结果
		out.flush();
		out.close();
}
private String selectLineAll() {//查询所有线路的方法
	String result;
	LineService lineService = new LineService();
	List<Line> list = new ArrayList<Line>();
	list = lineService.selectAll();  //通过jdbc连接取到线路list集合
	result = JSON.toJSONString(list);//转成json格式
	return result;
}

private String selectLineTypeAll() {//查询所有线路类型的方法
	String result;
	LineTypeService lineTypeService = new LineTypeService();
	List<LineType> list = new ArrayList<LineType>();
	list = lineTypeService.selectAll();//通过jdbc连接取到线路类型list集合
	result = JSON.toJSONString(list);//转成json格式
	return result;
}
private String selectAllPicture(){//查询所有图片得方法
	String result;
	PictureService pictureService = new PictureService();
	List<Picture> list = new ArrayList<Picture>();
	list = pictureService.selectAllPictures();//通过jdbc连接取到图片list集合
	result = JSON.toJSONString(list);//转成json格式
	return result;
}

（2）jsp发送请求

$.ajax({//从库中取出线路类型
				type:"post",
				url:"CommonSelect",
				dataType: "text",
				data:{
					method:"selectLTP" //传查询方法变量。请求查询所有线路、线路类型与所有图片
				},
				success : function(data){
				//通过split方法将返回的结果截取为两个片段
					var lineTypeObj = JSON.parse(data.split("&")[0]);//解析成线路类型对象
					var lineObj = JSON.parse(data.split("&")[1]);//解析成线路对象
					var pictureObj = JSON.parse(data.split("&")[2]);//解析成图片对象
				}
			});

图2-5就将数据返回到了jsp页面，后面我们就将这些数据拼接到页面即可。

结果展示图2-5

3.从jsp页面向后台传多个对象

3.1 请看下面图3-1

结果展示图3-1

  这是一个很常见的表单了。我需要从页面或取到游客的信息，方法有很多，如通过表单form提交给每一个表单name属性、通过ajax提交给表单id属性。但是这个表单是可以一直加的。我可能有1个游客、2个、3个…一个两个我们还可以一个一个的个name，给id取到对应的值。但是多了就不方便了。这里就需要用ajax来传多个对象了。
（1）表单的样式

<!--游客1-->
<div class="youke">
			<ul>
				<li><span>*</span> 真实姓名 <input name="textfield" type="text"
					id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
				<li><span>*</span> 手机 <input name="textfield" type="text"
					id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
				<li><span>*</span> 身 份 证 <input name="textfield" type="text"
					id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
				<li class="opli"><a href="" onclick="return false;" class="operateDel">-移除该信息栏</a></li>
			</ul>
</div>
<!--游客2-->
<div class="youke">
			<ul>
				<li><span>*</span> 真实姓名 <input name="textfield" type="text"
					id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
				<li><span>*</span> 手机 <input name="textfield" type="text"
					id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
				<li><span>*</span> 身 份 证 <input name="textfield" type="text"
					id="textfield" size="20" /> <a href="#"οnclick="return false;">修改</a></li>
				<li class="opli"><a href="" onclick="return false;" class="operateDel">-移除该信息栏</a></li>
			</ul>
</div>

(2)js ajax请求

<script>
function orBtn() {
		var state = false;
		$("input[type='text']").each(function(){//遍历页面所有的表单值，为不能提交
			if($(this).val()==""){
				alert("页面存在空值！");
				state = true;
				return false;
			}
		});
		if (!state) {//不为空，进行取表单
			var arr = new Array();//保存游客对象的数组
			var div = $(".youke");//取到所有放input表单的div
			for (var int = 0; int < div.length; int++) {//遍历div取表单数据
				var input = $(div[int]).find("input");
				var tourist = new Object();//创建一个游客对象
				tourist.realName = input[0].value;//取游客姓名
				tourist.tel = input[1].value;//取游客电话
				tourist.IDCard = input[2].value;//取游客身份证
				arr[int] = tourist;//将对象保存到arr数组
			}
			$.ajax({
				type : "post",
				dataType : "json",
				url: "OrderServlet",
				data : {
					tourist:JSON.stringify(arr),//将对象保存为json格式
				},
				success : function(data){
					alert(data);
					alert("下单成功");
				},error : function(){
					alert("！");
				}
			});
		}
	}
</script>

（3）servlet解析页面传来的json字符串

//实体游客
public class Tourist {
	private String touristID;//游客id，自动生成
	private String iDCard;//游客身份证
	private String tel;//游客电话
	private String realName;//游客真实姓名
}//实体游客结束

{//servlet部分
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/html");
	PrintWriter out = response.getWriter();
	String tourist = request.getParameter("tourist");//取到页面的游客对象字符串
	List<Tourist> list = JSONObject.parseArray(tourist, Tourist.class);//将json字符串转换成tourist对象
	
}

后台取到的结果如3-2所示

结果展示图3-2

4.总结

（1）ajax可以实现我们的局部刷新。节约时间，又减轻服务器压力。
（2）当需要从数据库取到多个表的数据的时候，我们需要将每个表的数据转换成json格式，连接成字符串传到请求页面。
（3）当我们需要从页面得到多组相同的数据时，我们可以将每组保为一个对象，然后用JSON.stringify(数组)，变成一个json格式字符串，发送给后台。