AJAX 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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

忆亦何为

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值