Ajax---使用json数据格式输出数据

1、项目清单

在这里插入图片描述

2、代码

2.1、Procince类代码

package com.bjpowernode.entity;

public class Province {
    
    

    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;

    public Integer getId() {
    
    
        return id;
    }

    public void setId(Integer id) {
    
    
        this.id = id;
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public String getJiancheng() {
    
    
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
    
    
        this.jiancheng = jiancheng;
    }

    public String getShenghui() {
    
    
        return shenghui;
    }

    public void setShenghui(String shenghui) {
    
    
        this.shenghui = shenghui;
    }
}

2.2、ProvinceDao类代码

package com.bjpowernode.dao;

import com.bjpowernode.entity.Province;

import java.sql.*;

//使用jdbc访问数据库
public class ProvinceDao {
    
    

    //根据id获取名称
    public String queryProviceNameById(Integer proviceId){
    
    
        //声明变量
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs  = null;
        String sql= "";
        //定义参数
        String url="jdbc:mysql://localhost:3306/springdb";
        String username="root";
        String password="123456";
        //连接数据库
        String name = "";
        //加载驱动
        try {
    
    
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            //创建PreparedStatement
            sql="select  name from province where id=?";
            pst = conn.prepareStatement(sql);
            //设置参数值
            pst.setInt(1,proviceId);
            //执行sql
            rs = pst.executeQuery();
            //遍历rs
            /*while(rs.next()){ //当你的rs中有多余一条记录时。
               name =  rs.getString("name");
            }*/

            if( rs.next()){
    
    
                name =rs.getString("name");
            }

        } catch (ClassNotFoundException | SQLException e) {
    
    
            e.printStackTrace();
        } finally {
    
    
            try{
    
    
                if( rs != null){
    
    
                    rs.close();
                }
                if( pst != null){
    
    
                    pst.close();
                }
                if( conn != null){
    
    
                    conn.close();
                }

            }catch(Exception e){
    
    
                e.printStackTrace();
            }

        }
        return name;
    }


    //根据id获取一个完整的Province对象
    public Province queryProviceById(Integer proviceId){
    
    
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs  = null;
        String sql= "";

        String url="jdbc:mysql://localhost:3306/springdb";
        String username="root";
        String password="123456";

        Province province = null;
        //加载驱动
        try {
    
    
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            //创建PreparedStatement
            sql="select id, name, jiancheng, shenghui  from province where id=?";
            pst = conn.prepareStatement(sql);
            //设置参数值,sql语句中有占位符,这里的1是指sql语句的第一个占位符,并传入参数provinceId
            pst.setInt(1,proviceId);
            //执行sql
            rs = pst.executeQuery();
            //遍历rs
            /*while(rs.next()){ //当你的rs中有多余一条记录时。
               name =  rs.getString("name");
            }*/

            if( rs.next()){
    
    
                province  = new Province();
                province.setId( rs.getInt("id"));
                province.setName(rs.getString("name"));
                province.setJiancheng(rs.getString("jiancheng"));
                province.setShenghui(rs.getString("shenghui"));
            }

        } catch (ClassNotFoundException | SQLException e) {
    
    
            e.printStackTrace();
        } finally {
    
    
            try{
    
    
                if( rs != null){
    
    
                    rs.close();
                }
                if( pst != null){
    
    
                    pst.close();
                }
                if( conn != null){
    
    
                    conn.close();
                }

            }catch(Exception e){
    
    
                e.printStackTrace();
            }

        }
        return province;
    }
}

2.3、QueryJsonServlet类代码

package com.bjpowernode.controller;

import com.bjpowernode.dao.ProvinceDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;

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.io.PrintWriter;

public class QueryJsonServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        //默认值, {} :表示json格式的数据
        String json = "{}";

        // 获取请求参数,省份的id
        String strProid = request.getParameter("proid");
        System.out.println("strProid========="+strProid);

        //判断proid有值时,调用dao查询数据
        if( strProid != null && strProid.trim().length() > 0 ){
    
    
            ProvinceDao dao  = new ProvinceDao();
            Province p  = dao.queryProviceById(Integer.valueOf(strProid));
            //需要使用jackson 把  Provice对象转为  json
            ObjectMapper om  = new ObjectMapper();
            json =  om.writeValueAsString(p);
        }

        //把获取的数据,通过网络传给ajax中的异步对象,响应结果数据
        //指定服务器端(servlet)返回给浏览器的是json格式的数据,json数据使用utf-8编码的
        //response.setContentType("text/json;charset=utf-8");
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw  = response.getWriter();
        /**
         *  <provines>
         *      <province>
         *          <name>河北</name>
         *          <shenghui>石家庄</shenghui>
         *      </province>
         *       <province>
         *          <name>山西</name>
         *          <shenghui>太原</shenghui>
         *       </province>
         *  </provines>
         */
        pw.println(json); //输出数据---会付给ajax中 responseText属性
        pw.flush();
        pw.close();
    }
}

2.4、TestJson类代码

package com.bjpowernode;

import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class TestJson {
    
    

    public static void main(String[] args) throws JsonProcessingException {
    
    
        // 使用jackson 把java对象转为json格式的字符串

        Province p = new Province();
        p.setId(1);
        p.setName("河北");
        p.setJiancheng("冀");
        p.setShenghui("石家庄");

        //使用jackson 把 p 转为 json
        ObjectMapper om  = new ObjectMapper();
        // writeValueAsString:把参数的java对象转为json格式的字符串
        String json  = om.writeValueAsString(p);
        System.out.println("转换的json=="+json);
    }
}

2.5、myajax.jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript">
        function  doSearch() {
    
    
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function() {
    
    
                if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
    
    
                    var data = xmlHttp.responseText;
                    //eval是执行括号中的代码, 把json字符串转为json对象
                    var jsonobj = eval("(" + data + ")");
                    //更新dom对象
                    callback(jsonobj);
                }
            }

            //3.初始异步对象的请求参数
            var proid = document.getElementById("proid").value;

            // true :异步处理请求。 使用异步对象发起请求后,不用等待数据处理完毕,就可以执行其它的操作。
            // false:同步,异步对象必须处理完成请求,从服务器端获取数据后,才能执行send之后的代码。 任意时刻只能执行一个异步请求。

            xmlHttp.open("get","queryjson?proid="+proid,false);

            //4.发送请求
            xmlHttp.send();


            //也可以创建其它的 XMLHttpRequest, 发送其它的请求处理。

            alert("====在send之后的代码====")
        }

        //定义函数,处理服务器端返回的数据
        function callback(json){
    
    
            document.getElementById("proname").value = json.name;
            document.getElementById("projiancheng").value=json.jiancheng;
            document.getElementById("proshenghui").value= json.shenghui;
        }

    </script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
    <tr>
        <td>省份编号:</td>
        <td><input type="text" id="proid">
            <input type="button" value="搜索" onclick="doSearch()">
        </td>
    </tr>
    <tr>
        <td>省份名称:</td>
        <td><input type="text" id="proname"></td>
    </tr>
    <tr>
        <td>省份简称:</td>
        <td><input type="text" id="projiancheng"></td>
    </tr>
    <tr>
        <td>省会名称:</td>
        <td><input type="text" id="proshenghui"></td>
    </tr>
</table>
</body>
</html>

2.6、web.xml文件代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--声明servlet-->
    <servlet>
        <servlet-name>QueryProvice</servlet-name>
        <servlet-class>com.bjpowernode.controller.QueryProviceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryProvice</servlet-name>
        <url-pattern>/queryProvice</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>QueryJsonServlet</servlet-name>
        <servlet-class>com.bjpowernode.controller.QueryJsonServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryJsonServlet</servlet-name>
        <url-pattern>/queryjson</url-pattern>
    </servlet-mapping>

</web-app>

3、笔记

  • 代码运行的底层逻辑:首先.jsp页面的doserch()方法中执行ajax的四个步骤,发送请求后, QueryJsonServlet 文件接收到请求后,获取请求参数(省份的id),然后实例化ProvinceDao的对象通过对象dao.queryProviceById()方法来访问数据库根据参数(省份的id)来获取相应的值,此处的sql语句是搜索id, name, jiancheng, shenghui的值,在数据库找到对应的数据后赋值给province的对象,注意queryProviceById方法的返回值是province,所以最终返回的是赋完值的province对象。QueryJsonServlet类得到返回的province对象后又赋值给Province 对象 p,然后需要使用jackson 把 Provice对象里p转为 json类型的字符串(json是json格式的数据,前面已经定义),把获取的数据通过网络传给ajax中的异步对象响应结果数据,同时还要指定服务器端(servlet)返回给浏览器的是json格式的数据,json数据是使用utf-8编码的。在myajax.jsp页面得到Servlet传过来的json字符串后再将其转换成json对象后输出。

  • 使用json好处是因为json格式的数据是以键值对(key:value)的形式表现的,由于从数据库返回的是一大串字符串,使用xml格式来处理这一大串字符串会比用json格式麻烦很多,因此json格式的数据应用比较广泛。

  • json分类:
    1、json对象 ,JSONObject ,这种对象的格式 名称:值, 也可以看做是 key:value 格式。
    2、json数组, JSONArray, 基本格式:
    [{ name:“河北”, jiancheng:“冀”,“shenghui”:“石家庄”} , { name:“山西”, jiancheng:“晋”,“shenghui”:“太原”} ]

  • 在js中的,可以把json格式的字符串,转为json对象, json中的key,就是json对象的属性名。

  • 为什么要使用json :

  1. json格式好理解
  2. json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
  3. json格式数据他占用的空间下,在网络中传输快, 用户的体验好。
  • 为什么要使用json :
  1. json格式好理解
  2. json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
  3. json格式数据他占用的空间下,在网络中传输快, 用户的体验好

猜你喜欢

转载自blog.csdn.net/qq_46152664/article/details/123188880