AJAX JSON的数据传输

忆亦何为

已于 2022-10-14 18:10:19 修改

阅读量3k

点赞数 1

文章标签： ajax json javascript

于 2022-10-14 15:12:32 首次发布

本文链接：https://blog.csdn.net/weixin_45832694/article/details/127318745

版权

文章目录

AJAX的JSON引入
javascriptJSON对象创建和访问
对案例进行改造，使用json传输
将java对象转换成json格式的字符串
对案例进行最终改造

AJAX的JSON引入

先看一个案例：用户点击按钮之后，发送AJAX请求，显示部门列表。
前端代码

<html>
  <head>
    <meta charset="UTF-8">
    <title>ajax dept</title>
  </head>
  <body>
  <script type="text/javascript">
    window.onload = function (){
      document.getElementById("btn").onclick = function (){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function (){
          if (this.readyState == 4) {
            if (this.status == 200) {
              document.getElementById("deptbody").innerHTML = this.responseText
            }else {
              alert(this.status)
            }
          }
        }
        xhr.open("GET","/ajax_dept/ajaxdept",true)
        xhr.send()
      }
    }
  </script>
  <input type="button" value="显示部门列表" id="btn">
  <table width="50%" border="1px">
    <tr>
      <th>部门编号</th>
      <th>部门名称</th>
      <th>部门位置</th>
    </tr>
    <tbody id="deptbody">
    <!--到时候输出的是以下形式-->
      <!--<tr>
        <td>10</td>
        <td>销售部</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>20</td>
        <td>研发部</td>
        <td>广州</td>
      </tr>-->
    </tbody>
  </table>
  </body>
</html>

后端

@WebServlet("/ajaxdept")
public class AjaxDeptServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            conn = DButil.getConnection();
            String sql = "select * from t_dept;";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            while (rs.next()){
                out.print("<tr>\n" +
                        "        <td>"+rs.getString("deptno")+"</td>\n" +
                        "        <td>"+rs.getString("dname")+"</td>\n" +
                        "        <td>"+rs.getString("loc")+"</td>\n" +
                        "      </tr>");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DButil.close(conn,ps,rs);
        }
    }
}

DButil是JDBC工具类
结果
请添加图片描述
显然在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。
后端不应该在java代码中编写HTML代码，会变得不好维护。
这时候可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。

javascriptJSON对象创建和访问

javascript怎么创建JSON对象

属性值的类型随意，可能为数字、布尔类型、字符串、数组、JSON对象。。。
var json对象名字 = {“属性名1” ：属性值1，“属性名2”：属性值2 …}
例如 var user = {"usercode":111,"username":"zhangsan","aihaos":{"打游戏","喝酒","抽烟"},"sex":true,"addr":{"city":"广州","street":"广州天河区"}}

javascript访问JSON

第一种方式 json对象名字.属性名

user.usercode
如果是JSON对象就继续’.': user.addr.city
如果是数组就进行遍历：for(var i = 0;i<user.aihaos.length;i++)user.aihaos[i]
第二种方式 json对象名字[“属性名”]

与上面差不多

javascript字符串转换成JSON对象

AJAX请求从后端响应回来的是一串字符串，javascript怎么把拼接JSON格式的字符串转换成JSON对象。
例如var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
它是一串JSON格式的字符串，需要把它转换成JSON对象

第一种方式：使用eval函数。
eval() 函数计算或执行参数。
如果参数是表达式，则 eval() 计算表达式。如果参数是一个或多个 JavaScript 语句，则 eval() 执行这些语句。
由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
这里只演示转换JSON：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示JSON</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
        //由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
        var eval1 = eval('('+jsonStr+')');
        alert(eval1.username)
    }
</script>
</body>
</html>

请添加图片描述

第二种方法：调用javascript语言种的内置对象JSON的一个方法parse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示JSON</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
        var josnObj = JSON.parse(jsonStr);
        alert(josnObj.username)
    }
</script>
</body>
</html>

请添加图片描述

对案例进行改造，使用json传输

html

<html>
  <head>
    <meta charset="UTF-8">
    <title>ajax dept</title>
  </head>
  <body>
  <script type="text/javascript">
    window.onload = function (){
      document.getElementById("btn").onclick = function (){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function (){
          if (this.readyState == 4) {
            if (this.status == 200) {
              var json = JSON.parse(this.responseText);//是一个数组，并且数组有多个部门数据
              var html = ""
              for (var i = 0; i < json.length; i++) {
                var dept = json[i];
                html += "<tr>\n" +
                        "        <td>"+dept.deptno+"</td>\n" +
                        "        <td>"+dept.dname+"</td>\n" +
                        "        <td>"+dept.loc+"</td>\n" +
                        " </tr>"
              }
              document.getElementById("deptbody").innerHTML = html
            }else {
              alert(this.status)
            }
          }
        }
        xhr.open("GET","/ajax_dept/ajaxdept",true)
        xhr.send()
      }
    }
  </script>
  <input type="button" value="显示部门列表" id="btn">
  <table width="50%" border="1px">
    <tr>
      <th>部门编号</th>
      <th>部门名称</th>
      <th>部门位置</th>
    </tr>
    <tbody id="deptbody">
    <!--到时候输出的是以下形式-->
      <!--<tr>
        <td>10</td>
        <td>销售部</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>20</td>
        <td>研发部</td>
        <td>广州</td>
      </tr>-->
    </tbody>
  </table>
  </body>
</html>

后端代码

@WebServlet("/ajaxdept")
public class AjaxDeptServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        StringBuffer json = new StringBuffer();
        String jsonstr = "";
        try {
            conn = DButil.getConnection();
            String sql = "select * from t_dept;";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            json.append("[");
            while (rs.next()){
                json.append("{\"deptno\":" + rs.getInt("deptno") + ",");
                json.append("\"dname\":\"" + rs.getString("dname") + "\",");
                json.append("\"loc\":\"" + rs.getString("loc") + "\"},");
            }
            jsonstr = json.substring(0, json.length() - 1) + "]";
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DButil.close(conn,ps,rs);
        }
        out.print(jsonstr);
    }
}

请添加图片描述

将java对象转换成json格式的字符串

我们发现在后端的json字符串拼接实在是太痛苦了，因为json只能使用双引号“”，而双引号在字符串里需要进行转义，所以拼接字符串的代码看起来就很另类
可以使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串

对案例进行最终改造

1.把阿里巴巴的fastjson组件导进去
2.创建一个Dept部门类，对外提供set/get方法访问。
3.创建一个List集合存储Dept类
4.把查询到的部门数据存储到java类里面，添加到List集合里

public class Dept {
    private Integer deptno;
    private String dname;
    private String loc;

    public Dept() {
    }

    public Integer getDeptno() {
        return this.deptno;
    }

    public void setDeptno(Integer deptno) {
        this.deptno = deptno;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getLoc() {
        return loc;
    }

    public void setLoc(String loc) {
        this.loc = loc;
    }
}

@WebServlet("/ajaxdept")
public class AjaxDeptServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        //StringBuffer json = new StringBuffer();
        String jsonstr = "";
        try {
            conn = DButil.getConnection();
            String sql = "select * from t_dept;";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            List<Dept> deptList = new ArrayList<>();
            /*json.append("[");*/
            while (rs.next()){
                /*json.append("{\"deptno\":" + rs.getInt("deptno") + ",");
                json.append("\"dname\":\"" + rs.getString("dname") + "\",");
                json.append("\"loc\":\"" + rs.getString("loc") + "\"},");*/
                Dept dept = new Dept();
                dept.setDeptno(rs.getInt("deptno"));
                dept.setDname(rs.getString("dname"));
                dept.setLoc(rs.getString("loc"));
                deptList.add(dept);
            }
            jsonstr = JSON.toJSONString(deptList);//把Java对象转换成JSON对象
            //jsonstr = json.substring(0, json.length() - 1) + "]";
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DButil.close(conn,ps,rs);
        }
        out.print(jsonstr);
    }
}

html页面不用修改
请添加图片描述

忆亦何为

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX JSON的数据传输

我们发现在后端的json字符串拼接实在是太痛苦了，因为json只能使用双引号“”，而双引号在字符串里需要进行转义，所以拼接字符串的代码看起来就很另类。AJAX请求从后端响应回来的是一串字符串，javascript怎么把拼接JSON格式的字符串转换成JSON对象。这时候可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。var json对象名字 = {“属性名1” ：属性值1，“属性名2”：属性值2 …它是一串JSON格式的字符串，需要把它转换成JSON对象。
复制链接

扫一扫