ajax-210810-07---json演示

最新推荐文章于 2023-11-21 13:31:26 发布

白光一

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量108

点赞数

分类专栏： ajax 文章标签： ajax

白光一

本文链接：https://blog.csdn.net/FlyUp__/article/details/119580212

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ajax-210810-07—json演示

演示

演示

ajaxjson.jsp（主页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax格式请求使用json格式数据</title>
    <script type="text/javascript">
        function search(){
            // 1. 创建异步对象
            var xmlHttp = new XMLHttpRequest();

            // 2. 绑定事件
            xmlHttp.onreadystatechange = function (){
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var data = xmlHttp.responseText;
                    // alert(data);

                    // 把json字符串转为一个对象，eval()方法
                    var jsonData = eval("(" + data + ")");

                    // 更新页面
                    document.getElementById("proname").value = jsonData.name;
                    document.getElementById("projiancheng").value = jsonData.jiancheng;
                    document.getElementById("proshenghui").value = jsonData.shenghui;
                }
            }

            // 3. 初始化对象
            var proId = document.getElementById("proid").value;
            xmlHttp.open("get","queryJson?proid="+proId,true);

            // 4. 发送请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
    <p>ajax格式请求使用json格式数据</p>
    <table>
        <tr>
            <td>
                省份编号：
            </td>
            <td>
                <input type="text" id="proid"/>
                <input type="submit" value="查找" οnclick="search()"/>
            </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>

ProviceObjectDao.java（dao层，获取Province对象）

package com.bgy.dao;

import com.bgy.entity.Province;

import java.sql.*;

public class ProviceObjectDao {

    // 根据id获取名称
    public Province queryProviceNameById(Integer proviceID){

        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs = null;

        String sql = "";
        String url = "jdbc:mysql://localhost:3306/springdb?&useSSL=false&serverTimezone=UTC";
        String username = "root";
        String password = "admin";

        Province province = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);

            sql = "select id,name,jiancheng,shenghui from province where id=?";
            pst = conn.prepareStatement(sql);
            pst.setInt(1,proviceID);

            rs = pst.executeQuery();

            while (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 e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }
            }  catch (SQLException e) {
                e.printStackTrace();
            }
        }

        return province;
    }
}

QueryJsonServlet.java（把province对象转为json格式，发给浏览器）

package com.bgy.controller;

import com.bgy.dao.ProviceObjectDao;
import com.bgy.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 = "{}";

        // 接收请求参数
        String strProid = request.getParameter("proid");

        // 判断请求参数是否有数据
        if ( strProid != null && strProid.trim().length()>0 ) {
            ProviceObjectDao proviceDao = new ProviceObjectDao();
            Province province = proviceDao.queryProviceNameById(Integer.valueOf(strProid));

            // 使用jackson 把province对象转为json
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(province);
        }

        // 把数据通过网络传给ajax中的异步对象，响应结果
        // 指定服务器(Servlet)返回给浏览的json格式的数据。
        response.setContentType("application/json;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.print(json);
        writer.flush();
        writer.close();
    }
}

web.xml（Servlet映射）

<?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-name>QueryJsonServlet</servlet-name>
        <servlet-class>com.bgy.controller.QueryJsonServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryJsonServlet</servlet-name>
        <url-pattern>/queryJson</url-pattern>
    </servlet-mapping>
</web-app>

结果展示

白光一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax-210810-07---json演示

ajax-210810-07—json演示演示ajaxjson.jsp（主页面）ProviceObjectDao.java（dao层，获取Province对象）QueryJsonServlet.java（把province对象转为json格式，发给浏览器）web.xml（Servlet映射）结果展示演示ajaxjson.jsp（主页面）<%@ page contentType="text/html;charset=UTF-8" language="java" %>
复制链接

扫一扫

专栏目录