IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例

傷城~ 2022-10-02 00:54 138阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

**案例需求：客户端发送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][param] name

\* [@param][param] age

\* [@param][param] gender

\* [@param][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>

<title>Title</title>

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" οnclick="getUserInfo()">获取用户信息</button>

</body>

</html>

最后启动Tomcat服务器，然后打开浏览器并输入http://localhost:8080/xdl\_ajax\_ demo/user.html，浏览器将显示如图4所示的页面。

此时点击获取用户信息按钮，网页将发送Ajax请求获取用户信息，最后浏览器将显示如图5所示的页面，表示浏览器已经获取到服务器端返回的JSON格式的用户数据，并且已经成功解析。

![1240][]

图4  user.html

![1240][1240 1]

图5  页面成功接收并解析服务端返回的用户信息

**案例需求：在上一个案例中，是客户端发送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>

<title>Title</title>

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" οnclick="getUserInfoList()">获取用户信息列表</button>

</body>

</html>

最后启动Tomcat服务器，然后打开浏览器并输入http://localhost:8080/xdl\_ajax\_ demo/userlist.html，浏览器将显示如图6所示的页面。

此时点击获取用户信息列表按钮，网页将发送Ajax请求获取用户信息列表，最后浏览器将显示如下图7所示的页面，表示浏览器已经获取到服务器端返回的JSON格式的用户列表数据，并且已经成功解析。

![1240][1240 2]

图6  userlist.html

![1240][1240 3]

图7  页面成功接收并解析服务端返回的用户信息列表

转载于:https://my.oschina.net/u/4125915/blog/3059056

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/d939331521d04a36928b20edbefd7feb.png
[param]: https://my.oschina.net/u/2303379
[1240]: /images/20220113/ef1d3060f5094d989452debcc4133362.png
[1240 1]: /images/20220113/ec5c1e10af6240beae338ce025cfdbca.png
[1240 2]: /images/20220113/1985885cdb054ca0a2f75886a2c00889.png
[1240 3]: /images/20220113/be19aee7569f42309e7905d4562b0dad.png