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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9048字，纯文字阅读大概需要13分钟。

内容图文

案例需求：客户端发送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格式的用户数据，并且已经成功解析。

IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例 - 文章图片

图4 user.html

IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例 - 文章图片

图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格式的用户列表数据，并且已经成功解析。

IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例 - 文章图片

图6 userlist.html

IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例 - 文章图片

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

内容总结

以上是互联网集市为您收集整理的IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例全部内容，希望文章能够帮你解决IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/812292.html

来源：【匿名】

【上一篇】IT兄弟连 JavaWeb教程 AJAX常见问题【下一篇】AJAX for PHP简单表数据查询实例

更多 ►

【IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例】教程文章相关的互联网学习教程文章

javascript-$.ajax传json字符串不行，传json对象就行【图】

如图所示，我看到很多文章里都是把数据转换成json字符串传过去的，但我这样做之后提示可以看到Form Data里面的数据没对，把我传的值当作一个键值了，后台也无法接收到数据（解析了json字符串也不行，输出为空）代码如下如果直接传对象进去，就对了，后台也能接收到数据不知道问题出在哪儿，求大神指点回复内容：如图所示，我看到很多文章里都是把数据转换成json字符串传过去的，但我这样做之后提示可以看到Form Data里面的数...

jquery拼接ajax 的json和字符串拼接的方法

整理文档，搜刮出一个jquery拼接ajax 的json和字符串拼接的代码，稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"><input name="name"/><input name="age"/><input type="submit"/> </form> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script>(function($){$.fn.serializeJson=function(){var serializeObj={};$(this.serializeArray()).each(funct...

javascript-JS用AJAX用POST传到PHP后台的JSON字符串为什么会成为一个对象？【图】

在PHP里面可以直接用json_decode($str),转回字符串。为什么变成一个JSON对象了呢？难道PHP有默认解析？直接输出是这样。然后直接对其json_decode(,true)是这样。回复内容：在PHP里面可以直接用json_decode($str),转回字符串。为什么变成一个JSON对象了呢？难道PHP有默认解析？直接输出是这样。然后直接对其json_decode(,true)是这样。首先你要明白JSON是什么，JavaScript Object Notation，意思是JavaScript对象表示法，它是...

使用原生ajax处理json字符串的方法【图】

JSON的全称是 Javascript Object Notation（javascript对象表示法），是基于javascript对象字面量。这篇文章主要介绍了使用原生ajax处理json字符串的相关资料,需要的朋友可以参考下AJAXAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。什么是json？JSON的全称是 Javascr...

ajax响应json字符串和json数组的实例（图文教程）【图】

下面我就为大家带来一篇ajax响应json字符串和json数组的实例。现在就分享给大家，也给大家做个参考。最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。直接看代码。json字符串的后台响应package com.ajax;import java.io.IOException; import java.io.PrintWriter;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet....

ajax响应json字符串和json数组的方法【图】

这次给大家带来ajax响应json字符串和json数组的方法，ajax响应json字符串和json数组的注意事项有哪些，下面就是实战案例，一起来看一下。最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。直接看代码。json字符串的后台响应package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotati...

jquery拼接ajax的json和字符串的方法

整理文档，搜刮出一个jquery拼接ajax 的json和字符串拼接的代码，本文主要介绍了jquery拼接ajax 的json和字符串拼接的方法，这里整理了详细的代码,有需要的小伙伴可以参考下。jQuery拼接字符串ajax<form id="myForm" action="#"><input name="name"/><input name="age"/><input type="submit"/> </form> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script>(function($){$.fn.serial...

ajax响应json字符串和json数组的实例(详解)【图】

最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。直接看代码。 json字符串的后台响应 package com.ajax;import java.io.IOException; import java.io.PrintWriter;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.H...

使用原生ajax处理json字符串的方法【图】

AJAXAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。什么是json？ JSON的全称是 Javascript Object Notation（javascript对象表示法），是基于javascript对象字面量，如果单从眼睛看，JSON里的数据是被保存在花括号里面-- {},如果在用途上面进一步分析，JSON是一种数据...

ajax查询数据库，服务器传回json字符串，js解析json【代码】

("departmentID");DataBaseHandle dataBaseHandle=new DataBaseHandle("commonUser", "common", "jdbc:mysql://127.0.0.1:3306/firstwebsite");String SQL="select * from speciality where departmentID=‘"+departmentID+"‘";String json="{‘specialities‘:[";response.setContentType("text/html; charset=utf-8");response.setCharacterEncoding("UTF-8");try {ResultSet rs=dataBaseHandle.exeuteSQL(SQL);while(rs.next()...