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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/91039800

案例需求:客户端发送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字符串经过解析后显示到页面上。详细代码如下:

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

<h2 id="name"></h2>

<h2 id="age"></h2>

<h2 id="gender"></h2>

<h2 id="salary"></h2>

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

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

图4 user.html

图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字符串经过解析后显示到页面上。详细代码如下:

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

<table id="userInfoList"></table>

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

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

图6 userlist.html

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券