案例需求:客户端发送AJAX请求服务器端获取用户信息的数据。
案例实现:
在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三方jar包来辅助我们把Java对象编程JSON字符串。
在服务器端将单个Java对象转换成JSON字符串使用JSONObject类的静态方法:formObject (Object object),该方法返回一个JSONObject对象,调用该对象的toString()方法即可完成转换。
在客户端将JSON字符串转换为JavaScript对象,常用的方法有如下几种:
● 使用eval函数:
var jsonStr = '{"id":1,"name":"张三"}'; var obj = eval( " ( " + str + " ) " );
● 使用JSON.parse函数
var jsonStr = '{"id":1,"name":"张三"}'; var obj = JSON.parse(str);
可以发现使用JSON.parse函数可以更方便的将JSON字符串转换为JavaScript对象,这也是推荐的方式。
下面的案例将演示如何使用Ajax从服务器端查询一个用户信息并使用json-lib.jar工具包将用户对象转换为JSON字符串然后返回到客户端。
首先新建一个动态的Web工程,工程名为xdl_ajax_demo,项目构建成功后在lib目录下添加json-lib.jar以及它的依赖包:
● commons-beanutils.jar
● commons-collections.jar
● common-logging.jar
● common-lang.jar
● ezmorph.jar
● json-lib.jar
然后再新建com.xdl.bean包并在包下定义一个User类,用来封装用户数据,包括以下属性:
name:姓名
age:年龄
gender:性别
salary:薪水
User类的详细代码如下:
package com.xdl.bean; public class User { private String name; //姓名 private int age; //年龄 private String gender; //性别 private double salary; //薪水 /** * 构造器 * @param name * @param age * @param gender * @param salary */ public User(String name, int age, String gender, double salary) { this.name = name; this.age = age; this.gender = gender; this.salary = salary; } /** * 无参构造器 */ public User(){ } //Get and Set方法 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public double getSalary() { return salary; } public void setSalary(double salary) { this.salary = salary; } }
接下来新建com.xdl.servlet包并在包下定义一个GetUserInfoServlet类,可以返回User对象的JSON字符串数据。详细代码如下:
package com.xdl.servlet; import com.xdl.bean.User; import net.sf.json.JSONObject; import javax.servlet.servletexception; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/getUserInfo") public class GetUserInfoServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException { User user = new User("三十画生",26,"男",5000.0); String jsonStr = JSONObject.fromObject(user).toString(); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonStr); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException { doGet(request,response); } }
编写HTML页面user.html,使用Ajax发送请求,把返回的用户信息JSON字符串经过解析后显示到页面上。详细代码如下:
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function getUserInfo(){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xhr.open('get','getUserInfo',true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var userInfo = xhr.responseText; userInfo = JSON.parse(userInfo); document.getElementById("name").innerHTML = 'name:' + userInfo.name; document.getElementById("age").innerHTML = 'age:' + userInfo.age; document.getElementById("gender").innerHTML = 'gender:' + userInfo.gender; document.getElementById("salary").innerHTML = 'salary:' + userInfo.salary; } }; xhr.send(null); } </script> </head> <body> <button type="button" onclick="getUserInfo()">获取用户信息</button> <h2 id="name"></h2> <h2 id="age"></h2> <h2 id="gender"></h2> <h2 id="salary"></h2> </body> </html>
最后启动Tomcat服务器,然后打开浏览器并输入http://localhost:8080/xdl_ajax_ demo/user.html,浏览器将显示如图4所示的页面。
此时点击获取用户信息按钮,网页将发送Ajax请求获取用户信息,最后浏览器将显示如图5所示的页面,表示浏览器已经获取到服务器端返回的JSON格式的用户数据,并且已经成功解析。
图4 user.html
案例需求:在上一个案例中,是客户端发送AJAX请求,服务端返回所有用户信息。
案例实现:
在服务器端将Java集合转换为JSON字符串需要使用JSONArray类的静态方法:formObject(Object object),该方法返回一个JSONArray对象,调用该对象的toString()方法即可完成转换。
下面将在之前xdl_ajax_demo项目的基础上进行,演示了如何使用Ajax从服务器端查询一个用户信息列表并使用json-lib.jar工具包将用户列表对象转换为JSON字符串然后返回到客户端。
首先在com.xdl.servlet包下定义GetUserInfoListServlet类,可以返回User对象集合的JSON字符串数据。详细代码如下:
package com.xdl.servlet; import com.xdl.bean.User; import net.sf.json.JSONArray; import javax.servlet.servletexception; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; @WebServlet("/getUserInfoList") public class GetUserInfoListServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException { User user1 = new User("三十画生",26,"男",5000.0); User user2 = new User("二十画生",24,"女",15000.0); List<User> userList = new ArrayList<>(); userList.add(user1); userList.add(user2); String jsonStr = JSONArray.fromObject(userList).toString(); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonStr); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException { doGet(request,response); } }
编写HTML页面userlist.html,使用Ajax发送请求,把返回的用户信息列表的JSON字符串经过解析后显示到页面上。详细代码如下:
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function getUserInfoList(){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xhr.open('get','getUserInfoList',true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var userInfoList = xhr.responseText; userInfoList = JSON.parse(userInfoList); var userInfoListTable = document.getElementById("userInfo List"); userInfoListTable.innerText = ''; var rowHead = userInfoListTable.insertRow(); rowHead.insertCell().innerHTML = 'NAME'; rowHead.insertCell().innerHTML = 'AGE'; rowHead.insertCell().innerHTML = 'GENDER'; rowHead.insertCell().innerHTML = 'SALARY'; for(var i = 0;i<userInfoList.length;i++){ var userInfo = userInfoList[i]; var row = userInfoListTable.insertRow(); row.insertCell().innerHTML = userInfo.name; row.insertCell().innerHTML = userInfo.age; row.insertCell().innerHTML = userInfo.gender; row.insertCell().innerHTML = userInfo.salary; } } } xhr.send(null); } </script> </head> <body> <button type="button" onclick="getUserInfoList()">获取用户信息列表</button> <table id="userInfoList"></table> </body> </html>
最后启动Tomcat服务器,然后打开浏览器并输入http://localhost:8080/xdl_ajax_ demo/userlist.html,浏览器将显示如图6所示的页面。
此时点击获取用户信息列表按钮,网页将发送Ajax请求获取用户信息列表,最后浏览器将显示如下图7所示的页面,表示浏览器已经获取到服务器端返回的JSON格式的用户列表数据,并且已经成功解析。
图6 userlist.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。