ajax对json的解析

发表时间:2017-05-16 15:51:13 浏览量( 26 ) 留言数( 0 )

学习目标:

1、了解服务端生产json格式

2、了解ajax对json的解析


学习过程:

ajax标准是使用xml定义数据格式,作为客户端与服务器端的数据通讯格式,但是我们更常用的应该是json,因为json比xml更加轻量级,而且js解析json也更加简单,上一节中我们只是简单的使用字符串作为通讯格式,这节我们使用json实现更加复杂的通讯。我们主要分为两个步骤。1、服务器端生成生成json。2、客户端解析json。

一、服务器端生成json

服务器端通常会把对象转换为json格式,这种转换比较简单,我们可以通过字符串的拼接来实现,不过我们也可以使用第三方的技术实现自动转换,比较常用的有json-lib-2.4-jdk15包和gson包两种方式,相比之下gson更加简单一点,在android中我们已经介绍过了,所以这里我们讲讲使用json-lib的方式json-lib的下载地址如下:

http://sourceforge.net/projects/json-lib/files/

json-lib包依赖的第三方包比较多,包括如下几个jar包:

attcontent/d3c3d1a5-3904-4c48-971c-92dd7cc82e31.png

把这些包都导入项目中,我们首先把登录模块修改一下。登录成功后显示登录用户的员工姓名,所以用户登录成功后返回的是Login对象生成的json格式,代码修改如下:

public class LoginServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		System.out.println("进入了后台服务器");
		PrintWriter out = response.getWriter();
		
		//模拟网络延迟
		try {
			Thread.sleep(2000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		//获得用户的信息
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		
		LoginBiz loginBiz=new LoginBiz();
		
		Login login=loginBiz.login(username, password);
		//把login发给页面   以json的格式
		JSONObject jsonObject=JSONObject.fromObject(login);
		if(login==null){
			out.print(jsonObject.toString());
		}else{			
			//保存在session
			request.getSession().setAttribute("login", login);
			out.print(jsonObject.toString());
		}

		out.flush();
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

二、客户端解析json

服务器生成之后解析json就非常简单了。而且这里也只有一个对象不涉及到循环。修改页面端代码如下即可:

  $("#loginmessage").html("欢迎"+data.employee.employeeName);

三、示例,使用jquery遍历json

上面的页面端解析比较简单,下面我们讲解一下使用jquery实现对json的遍历。新建一个EmployeeServlet类,实现查询全部员工的操作,最后生成json输出,代码如下:

public class EmployeeServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		System.out.println("进入");
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		
		EmployeeBiz employeeBiz=new EmployeeBiz();
		List<Employee> employees=employeeBiz.getAll();
		
		//JSONObject jObject=JSONObject.fromObject(employees);
		JSONArray array=JSONArray.fromObject(employees);
		out.print(array.toString());
		System.out.println(array.toString());

		out.flush();
		out.close();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}
}

你可以直接访问这个servlet查看是否能够正常输出,在浏览器中输入访问路径:

http://localhost:8080/ajax01/employee,得到一下信息。

[{"addr":"北京","birthday":null,"card":"","employeeId":0,"employeeName":"张三","picture":"","salary":0},{"addr":"上海","birthday":null,"card":"","employeeId":0,"employeeName":"李四","picture":"","salary":0}]

页面端解析使用jqery的jQuery.each(object, [callback])方法,这个方法通用例遍方法,可用于例遍对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

遍历数组示例如下:

$.each( [0,1,2], function(i, n){

  alert( "Item #" + i + ": " + n );

});

也可遍历对象,示例如下:

$.each( { name: "John", lang: "JS" }, function(i, n){

  alert( "Name: " + i + ", Value: " + n );

});

我们这里需要用户点击按钮后异步加载员工列表信息,html代码如下:

	<input value="查询用户" type="button" id="employee"/>
	<table id="emptable">
	   <tr><td>用户名</td> <td>地址</td></tr>
	</table>

js代码如下:

$("#employee").click(function (){
         //清空
          $("#emptable").html("<tr><td>用户名</td> <td>地址</td></tr>");
          //异步加载list 
          $.get("employee", function(data){
              $.each( data, function(i, n){
                   //alert( "Name: " + i + ", Value: " + n.employeeName );
                   $("#emptable").append("<tr><td>"+n.employeeName+"</td><td>"+n.addr+"</td></tr>");
              });
              
           },"json");
    
    });