Ajax请求,基于JSON的数据交换 实例

news2024/11/23 5:04:06

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送Ajax GET请求 展示学生信息列表</title>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                //发送Ajax请求
                //1.创建核心对象
                var xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {

                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            //将浏览器返回的信息JSON格式的字符串转换成JSON对象,这个JSON对象是一个数组
                            var jsonObjArray = JSON.parse(xhr.responseText);
                            // alert(jsonObj.toString());
                            //定义一个空字符串为后面的拼串做准备
                            var html = "";
                            //遍历数组
                            for (var i = 0;i < jsonObjArray.length; i ++){
                                //根据下标从数组中获取到JSON对象
                                var student = jsonObjArray[i];
                                //开始拼接html代码
                                html += "<tr>";
                                html += "<td>"+ (i+1) +"</td>";
                                html += "<td>"+student.name+"</td>";
                                html += "<td>"+student.age+"</td>";
                                html += "<td>"+student.addr+"</td>";
                                html += "</tr>";
                            }
                            //将拼接好的html代码响应到"tbody"标签
                            document.getElementById("tbody").innerHTML = html;
                        }
                    }
                };
                //3.打开通道
                xhr.open("GET","/ajax/request5",true);
                //4.发送请求
                xhr.send();
            }
        }
    </script>
</head>
<body bgcolor="#87ceeb">
    <button id="btn">点击按钮 发送Ajax GET请求 展示学生信息列表</button>
    <br/>
    <br/>
    <h2>学生信息列表</h2>
    <table width="50%" border="1px">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody id="tbody">
<!--        <tr>-->
<!--            <td>1</td>-->
<!--            <td>zs</td>-->
<!--            <td>33</td>-->
<!--            <td>bj</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>2</td>-->
<!--            <td>ls</td>-->
<!--            <td>22</td>-->
<!--            <td>sh</td>-->
<!--        </tr>-->
        </tbody>
    </table>
</body>
</html>

服务端代码:

package com.yjg.ajax.servlet;

import com.alibaba.fastjson.JSON;
import com.yjg.ajax.bean.Student;
import com.yjg.ajax.util.DBUtil;

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;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/request5")
public class AjaxRequest5Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        Connection con = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<Student> list = new ArrayList<>();
        try {
            con = DBUtil.getConnection();
            String sql = "select id,name,age,addr from t_student";
            ps = con.prepareStatement(sql);
            rs = ps.executeQuery();
            while (rs.next()){
                String name = rs.getString("name");
                int age = rs.getInt("age");
                String addr = rs.getString("addr");
                Student student = new Student(name,age,addr);
                list.add(student);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(con,ps,rs);
        }
        //将List集合转换成JSON格式的字符串
        String jsonStr = JSON.toJSONString(list);
        //设置响应信息的内容和字符集,防止中文乱码
        response.setContentType("text/html;charset=utf-8");
        //获取输出流
        PrintWriter out = response.getWriter();
        //向浏览器响应信息
        out.print(jsonStr);
    }
}
 

实体类代码:

package com.yjg.ajax.bean;

public class Student {
    private String name;
    private int age;
    private String addr;

    public Student() {
    }

    public Student(String name, int age, String addr) {
        this.name = name;
        this.age = age;
        this.addr = addr;
    }

    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 getAddr() {
        return addr;
    }

    public void setAddr(String addr) {
        this.addr = addr;
    }

    @Override
    public String toString() {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", addr='" + addr + '\'' +
                '}';
    }
}
 

数据库工具类代码:

package com.yjg.ajax.util;

import java.sql.*;
import java.util.ResourceBundle;

public class DBUtil {
    //私有的构造方法
    private DBUtil(){}

    //类加载时绑定属性资源文件(静态变量和静态代码块的执行时间一样,都是在类加载的时候执行,这时就看代码的先后顺序了,谁在前谁先执行)
    private static ResourceBundle bundle = ResourceBundle.getBundle("resources/db");

    static {
        try {
            Class.forName(bundle.getString("driver"));
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取数据库连接对象   (以后在实际开发中只要调用该方法就会完成注册驱动和获取连接两步)
     * @return 新的连接对象
     * @throws SQLException 这里选择上抛异常,由使用者捕捉。
     */
    public static Connection getConnection() throws SQLException {
        String url = bundle.getString("url");
        String user = bundle.getString("user");
        String password = bundle.getString("password");
        Connection conn = DriverManager.getConnection(url,user,password);
        return conn;
    }

    /**
     * 释放资源
     * @param conn 连接对象
     * @param stmt 数据库操作对象 这里最好写Statement,而不写PreparedStatement,
     *             原因是今后可以使用多态,既可以传一个父类对象,也可以传入子类对象。
     * @param rs 查询结果集
     */
    public static void close(Connection conn, Statement stmt, ResultSet rs){
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (stmt != null) {
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}
 

属性资源配置文件:

 数据库信息:

程序运行后浏览器页面显示效果: 

点击按钮之前的显示效果:

点击按钮之后的显示效果:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/508817.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

camunda任务监听器如何使用

在Camunda工作流引擎中&#xff0c;任务监听器是一种机制&#xff0c;用于在业务任务执行期间捕获特定事件并执行相应的操作。它们可以帮助您实现一些重要的任务&#xff0c;例如&#xff1a; 1、记录或更新业务数据&#xff1a;当任务完成或取消时&#xff0c;您可以使用任务…

本地搭建wamp服务器并内网穿透实现无公网IP远程访问

文章目录 前言1.Wamp服务器搭建1.1 Wamp下载和安装1.2 Wamp网页测试 2. Cpolar内网穿透的安装和注册2.1 本地网页发布2.2 Cpolar云端设置2.3 Cpolar本地设置 3. 公网访问测试4. 结语 转载自cpolar极点云的文章&#xff1a;无公网IP&#xff1f;教你在外远程访问本地Wamp服务器「…

【C++】入门基础

文章目录 1、命名空间1.1、命名空间的概念1.2、命名空间的定义1.3、命名空间的使用 2、初识cout和cin2.1、标准输入输出对象简介2.2、缓冲区2.3、cout2.4、cin 3、缺省参数3.1、全缺省参数3.2、半缺省参数3.3、注意事项 4、函数重载4.1、函数重载的概念4.2、函数重载的定义4.3、…

OpenCV实战——根据立体图像计算深度信息

OpenCV实战——根据立体图像计算深度信息 0. 前言1. 立体视觉系统2. 计算深度信息3. 完整代码相关链接 0. 前言 人类可以用两只眼睛构建三个维度世界&#xff0c;而为机器人配备两个摄像头时&#xff0c;机器人同样也可以做到这一点&#xff0c;这称为立体视觉 (stereo vision…

exe4j

exe4j是一种用于将Java程序打包成可执行文件&#xff08;.exe&#xff09;的软件工具。使用exe4j&#xff0c;开发人员可以将Java程序打包成可独立运行的.exe文件&#xff0c;并将所需的Java虚拟机&#xff08;JVM&#xff09;包含在内。exe4j提供了许多配置选项&#xff0c;可…

五、FM1288调试方案-调试原理

本篇只讲述调试原理,侧重流程、理论,不涉及细节,比如应该调哪一块、哪些寄存器这些。 文章目录 1. 结构框图1.1 回声消除原理1.2 硬件结构2. 调试方案2.1 uart串口调试2.2 I2C调试1. 结构框图 1.1 回声消除原理 回声消除的详细原理,牵涉到算法相关的东西,不太了解,只描…

二项分布的参数p的检验

设某事件发生的概率为p&#xff0c;做m次的独立检验&#xff0c;以X为发生的次数&#xff0c;则X服从二项分布B(m, p)&#xff0c;则针对X可以做出假设 定义一个合理的检验,&#xff0c;设置一个阈值C&#xff1a; F : 当 X < C时&#xff0c;接受H0&#xff0c;否则拒绝H0 …

[亲测有效] 如何实现vivo图案解锁

vivo是最受欢迎的智能手机品牌之一&#xff0c;拥有庞大的客户群。但是在使用vivo手机的过程中&#xff0c;难免会出现意外。其中最常见的是忘记密码。那么&#xff0c;如果您忘记了密码&#xff0c;如何解锁 vivo 手机呢&#xff1f;这是您需要知道的一切。本文将向您展示5种轻…

云原生应用环境中的权限提升

对于如今的现代数字应用程序&#xff0c;在操作事件期间管理访问权限对于确保企业的生产环境和基础架构安全都至关重要。一个被大家认可的基本安全原则是最小权限原则&#xff0c;基于该原则开发人员和运维人员应该具备尽可能小的权限&#xff0c;只访问必须的生产环境及数据&a…

牛客网剑指offer|中等题day2|JZ22链表中倒数最后k个结点(简单)、JZ35复杂链表的复制(复杂)、JZ77按之字形顺序打印二叉树(中等)

JZ22链表中倒数最后k个结点(简单) 链接&#xff1a;链表中倒数最后k个结点_牛客题霸_牛客网 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/ class Solution { public:/*** 代码中的类名、方法名、参数名已经指…

CRM系统的在线演示是什么?有什么作用?

CRM系统在线演示的作用是帮助企业选择适合的CRM系统。在线演示可以让企业更好地了解CRM系统是如何工作的&#xff0c;以及它如何能使他们的业务受益。在线演示实质上是CRM系统的虚拟演示&#xff0c;您可以清楚的知道它是如何工作的&#xff0c;以及如何通过定制来满足某些业务…

解释水波特效处理

这篇博文译自以下这篇文章——The Water Effect Explained 由于这篇文章主要用Pascal语言进行描述的。因此我后面会添加一些注释&#xff0c;并结合Apple提供的ripple相关的Demo给出一些额外的遵守GNU11规范的C代码。 介绍 在计算机图形中的许多特效中&#xff0c;水特效是一…

ResourceManager HA 原理

简介 为了解决 Yarn 中 ResourceManager 的单点故障问题&#xff0c;在 Hadoop 2.4 中新增了 ResourceManager HA 的能力&#xff0c; 该文章基于 Hadoop 3.1.1 进行讲解。 1.1. 名词定义 全称简称备注ResourceManagerRmZookeeperZK ResourceManager Ha 架构 ResourceMana…

Linux shell编程 数组 ^ 数组排序

数组定义 数组内数据类型可以为数值也可以为字符串。 若字符串类型需要使用 " " 包含以免空格扰乱数组。 方法1 空格分隔直接定义数组 arr(10 20 30 40 50) arr1(zhangsan lisi wangwu) 方法2 指定元素下标定义&#xff0c;若跳过元素不设置会显示为空 arr([0]1…

Python 密码破解指南:10~14

协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【OpenDocCN 饱和式翻译计划】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 收割 SB 的人会被 SB 们封神&#xff0c;试图唤醒 SB 的人是 SB 眼中的 SB。——SB 第三定律 十、加…

震惊!如果患上植物神经紊乱,就会诱发胃肠神经功能紊乱!

植物神经系统和胃肠系统是人体内重要的调节系统&#xff0c;它们分别负责着许多生物过程的调控。当这两个系统出现紊乱时&#xff0c;会对人体健康产生不良影响。本文将从植物神经紊乱与胃肠神经功能紊乱的关系、症状、治疗办法和生活预防方法四个方面进行探讨。 一、植物神经紊…

GoAccess 网站日志分析

GoAccess是一个开源且免费的网站日志分析和交互式WEB日志查看器&#xff0c;可在 Linux 系统的终端中或通过浏览器运行。使用它可让系统管理员视化的查看统计报告&#xff0c;这对于SEO以及运维来说非常有价值。 GoAccess支持几乎所有Web 日志格式&#xff0c;包含&#xff1a;…

数据结构-图的遍历和应用(DAG、AOV、AOE网)

目录 *一、广度优先遍历(BFS) 广度优先生成树 广度优先生成森林 *二、深度优先遍历 深度优先生成树 深度优先生成森林 二、应用 2.1最小生成树 *Prim算法 *Kruskal算法 2.2最短路径 *BFS算法 *Dijkstra算法 *Floyd算法 *2.3有向无环图(DAG网) *2.4拓扑排序(AOV网)…

Java之线程安全

目录 一.上节回顾 1.Thread类常见的属性 2.Thread类中的方法 二.多线程带来的风险 1.观察线程不安全的现象 三.造成线程不安全现象的原因 1.多个线程修改了同一个共享变量 2.线程是抢占式执行的 3.原子性 4.内存可见性 5.有序性 四.解决线程不安全问题 ---synchroni…

【Win32绘图编程,GDI绘图对象】绘图基础,位图处理,绘图消息处理,画笔,画刷,文本绘制

这一篇文章分享本人学习win32绘图编程&#xff0c;其中包括GDI绘图对象&#xff0c;绘图基础&#xff0c;基本图形的绘制&#xff0c;画笔画刷的使用&#xff0c;文本绘制&#xff0c;以及文本字体的更改。 文章目录 一.绘图基础1.BeginPaint函数2.EndPaint函数3.颜色的使用 二…