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

時間  2019-12-05
標籤 兄弟 javaweb 教程 ajax 以及 json 字符串 經典案例 欄目 Java 简体版
原文   原文鏈接

案例需求：客戶端發送AJAX請求服務器端獲取用戶信息的數據。javascript

案例實現：html

在服務器端要將Java對象轉換成JSON字符串，若是使用拼接JSON字符串的方式很是繁瑣，而且很是容易出錯，因此通常會藉助第三方Jar包來輔助咱們把Java對象編程JSON字符串。java

在服務器端將單個Java對象轉換成JSON字符串使用JSONObject類的靜態方法：formObject (Object object)，該方法返回一個JSONObject對象，調用該對象的toString()方法便可完成轉換。ajax

在客戶端將JSON字符串轉換爲JavaScript對象，經常使用的方法有以下幾種：編程

●  使用eval函數：json

var jsonStr = '{"id":1,"name":"張三"}';瀏覽器

var obj = eval( " ( " + str + " ) " );服務器

●  使用JSON.parse函數ide

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                


 

圖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>

    <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


 

圖7  頁面成功接收並解析服務端返回的用戶信息列表

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程