【Ajax零基础教程】-----第四课 简单实现

一、XMLHttpRequest对象

   通过XMLHttpRequest对象来向服务器发送异步请求,从服务器获取数据。然后用JavaScript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制,它是IE5中首先引入的,是一种支持异步请求的技术。

  简单的说,也就是JavaScript可以及时的向服务器提出请求并及时响应。而不阻塞用户。达到无刷新效果。

二、Ajax使用过程

  1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

  2、给定请求方式以及请求地址

xhr.open("get","http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city="); 

    后端服务 ip地址+端口号+资源路径

 3、发送请求

xhr.send();

 4、获取服务器端给客户端的响应数据

xhr.onreadystatechange = function(){//0:open()没有被调用//1:open()正在被调用//2:send()正在被调用//3:服务端正在返回结果//4:请求结束,并且服务端已经结束发送数据到客户端if (this.readyState == 4 && this.status == 200) {document.getElementById("demo").innerHTML = this.responseText;}
}

三、实战案例

  需求:创建User类,包含id,age属性。

在用户管理界面中通过Ajax技术完成对用户数据载入、添加用户、更新用户、删除用户操作。

1、新建web项目,层级如下

common(公共实体):用于存放公共实体类

dao(数据访问层):用于存放应用程序的数据访问类,负责与数据库或其他数据源进行交互。

pojo(模型层):用于存放应用程序的数据模型类,表示应用程序中的实体对象。

service(服务层):用于存放应用程序的服务类,负责实现业务逻辑。

servlet(控制器层):用于存放应用程序的控制器类,负责处理请求和控制应用程序的流程。

utils(工具类):用于存放应用程序的工具类,包含各种通用的辅助方法。

2、搭建环境
  • 数据库创建用户表
# 创建用户表
CREATE TABLE `user` (`id` int NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,`age` int DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;DELETE FROM `user`;
# 添加用户
INSERT INTO `user` (id, name, age) VALUES
(1, 'Jone', 18),
(2, 'Jack', 20),
(3, 'Tom', 28),
(4, 'Sandy', 21),
(5, 'Billie', 24);
  • 创建实体类
/*** 用户表模型*/
public class User {// 序号private Integer id;// 名字private String name;// 年龄private Integer age;// 邮箱public User(Integer id, String name, Integer age, String email) {this.id = id;this.name = name;this.age = age;}public User() {}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 Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + ''' +", age=" + age +'}';}
}
  • 统一结果返回集
/*** 统一结果返回集*/
public class ResultAjax {//状态码 200 成功 500 失败private Integer code;//返回消息private String message;//返回对象private Object data;//成功返回public static ResultAjax ok(String message,Object data){ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(200);resultAjax.setMessage(message);resultAjax.setData(data);return resultAjax;}//失败返回public static ResultAjax error(String message){ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(500);resultAjax.setMessage(message);return resultAjax;}public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}
}
  • 编写数据库连接工具
    1)创建数据库连接信息文件

在src目录下创建druid.properties,基于Druid连接池获取数据库连接工具类。

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?useSSL=false
username=root
password=123456
initialSize=10
maxActive=20
       2) 创建工具类
/*** 基于Druid连接池获取数据库连接工具类*/
public class JdbcDruidUtil {//数据库连接池对象private static DataSource dataSource;static{try {//获取读取配置文件的字节输入流对象InputStream is = JdbcDruidUtil.class.getClassLoader().getResourceAsStream("druid.properties");//创建Properties对象Properties pop = new Properties();//加载配置文件pop.load(is);//创建连接池对象dataSource = DruidDataSourceFactory.createDataSource(pop);}catch(Exception e){e.printStackTrace();}}//获取数据库连接对象public static Connection getConnection(){Connection connection = null;try {connection = dataSource.getConnection();} catch (SQLException throwables) {throwables.printStackTrace();}return connection;}//关闭连接对象public static void closeConnection(Connection connection){try {connection.close();} catch (SQLException throwables) {throwables.printStackTrace();}}//关闭Statement对象public static void closeStatement(Statement statement){try {statement.close();} catch (SQLException throwables) {throwables.printStackTrace();}}//关闭ResultSetpublic static void closeResultSet(ResultSet resultSet) {try {resultSet.close();} catch (SQLException throwables) {throwables.printStackTrace();}}//DML操作时关闭资源public static void closeResource(Statement statement,Connection connection){//先关闭Statement对象closeStatement(statement);//在关闭Connection对象closeConnection(connection);}//查询时关闭资源public static void closeResource(ResultSet resultSet,Statement statement,Connection connection){if (resultSet != null){//先关闭ResultSetcloseResultSet(resultSet);}if (statement != null){//在闭Statement对象closeStatement(statement);}if (connection != null){//最后关闭Connection对象closeConnection(connection);}}
}

3)用户持久层新建查询接口

 新建用户持久层文件UsersDao接口

public class UserDao {/*** 查询所有数据* @return*/List<User> findByAll();
}
4) 用户持久层实现查询接口
*** 操作用户表持久层*/
public class UsersDaoImpl implements UsersDao { /*** 查询所有用户* @return*/@Overridepublic List<User> findByAll() {Connection conn =null;Statement s = null;ResultSet rs = null;List<User> userList = new ArrayList<>();try{conn = JdbcDruidUtil.getConnection();String sql = "select * from user";s = conn.createStatement();rs = s.executeQuery(sql);while(rs.next()){//手动orm映射User u = new User();u.setId(rs.getInt("id"));u.setName(rs.getString("name"));u.setAge(rs.getInt("age"));userList.add(u);}}catch(Exception e){e.printStackTrace();}finally{JdbcDruidUtil.closeResource(s,conn);}return userList;}}
5)编写用户管理前端页面
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>用户管理</title><style>div{padding:20px 10px 0 10px;}.total_content{display: flex; / 创建 Flexbox 布局 /justify-content: center; / 水平居中对齐 /align-items: center; / 垂直居中对齐 /}</style>
</head>
<body>
<div class="total_content"><h1 >用户管理系统</h1>
</div><div><table align="center" width="60%" border="0" cellspacing="1" bgcolor="#000000"><tr bgcolor="#FFFFFF"><td>ID:</td><td><input type="text" name="id" id="userId"/></td><td>姓名:</td><td><input type="text" name="name" id="name"/></td><td>年龄:</td><td><input type="number" name="age" id="age"/></td></tr><tr align="center" bgcolor="#FFFFFF"><td colspan="6"><input type="button" value="添加用户" onclick="addUser()" /><input type="button" value="更新用户" onclick="updateUser()"/></td></tr></table> <hr/><table align="center" width="60%" bgcolor="#000000" border="0" id="myTable" cellpadding="0" cellspacing="1"><thead><tr align="center" bgcolor="#FFFFFF"><td>ID</td><td>姓名</td><td>年龄</td><td>操作</td></tr></thead><tbody id="tBody"></tbody></table></div>
</body>
</html>
6)编写用户查询servlet

用户业务层新增查询接口---UsersService

public interface UsersService {/*** 查询所有数据* @return*/List<User> findByAll();
}

创建用户业务层接口实现类-----UsersServiceImpl。

/*** 用户业务层**/
public class UsersServiceImpl implements UsersService {/*** 查询全部用户* @return*/@Overridepublic List<User> findByAll() {UsersDao usersDao = new UsersDaoImpl();return usersDao.findByAll();}} 

用户查询控制层编写---创建UserListServlet控制器类

@WebServlet("/user.do")
public class UserListServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String flag = req.getParameter("flag");switch (flag){case "getData":this.getData(req,resp);break;}}// 获取页面初始化数据private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException {UsersService usersService = new UsersServiceImpl();List<User> userList = usersService.findByAll();ResultAjax success = ResultAjax.success(userList);writerTopage(resp,success);}/*** 输出至页面方法* @param resp* @param data* @throws IOException*/private void writerTopage(HttpServletResponse resp,Object data) throws IOException {String s = JSON.toJSONString(data);resp.setContentType("application/json");resp.setCharacterEncoding("UTF-8");PrintWriter pw = resp.getWriter();pw.print(s);pw.flush();pw.close();}}

前端实现显示用户数据

<script type="text/javascript" src="jquery路径"></script>
<script>$(function() {//初始化用户数据getData();}); // 获取页面初始化数据function getData(){$.getJSON("user.do",{flag:"getData"},function (result) {listUser(result);});}// 遍历数据生成数据function listUser(obj){var str ="";$.each(obj.data,function(){str+= "<tr align='center' bgcolor=\"#FFFFFF\">" +"<td id='"+this.id+"'>"+this.id +"</td>"+"<td>"+this.name+"</td>" +"<td>"+this.age+"</td>" +"<td><a href='#' >更新</a>&nbsp;&nbsp;<a href='#'>删除 </a></td></tr>"});$("#tBody").prepend(str);}
</script>

7)用户添加

<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>用户管理</title><style>div{padding:20px 10px 0 10px;}.total_content{display: flex; / 创建 Flexbox 布局 /justify-content: center; / 水平居中对齐 /align-items: center; / 垂直居中对齐 /}</style>
</head>
<body>
<div class="total_content"><h1 >用户管理系统</h1>
</div><div><table align="center" width="60%" border="0" cellspacing="1" bgcolor="#000000"><tr bgcolor="#FFFFFF"><td>ID:</td><td><input type="text" name="id" id="userId"/></td><td>姓名:</td><td><input type="text" name="name" id="name"/></td><td>年龄:</td><td><input type="number" name="age" id="age"/></td></tr><tr align="center" bgcolor="#FFFFFF"><td colspan="6"><input type="button" value="添加用户" onclick="addUser()" /><input type="button" value="更新用户" onclick="updateUser()"/></td></tr></table> <hr/><table align="center" width="60%" bgcolor="#000000" border="0" id="myTable" cellpadding="0" cellspacing="1"><thead><tr align="center" bgcolor="#FFFFFF"><td>ID</td><td>姓名</td><td>年龄</td><td>操作</td></tr></thead><tbody id="tBody"></tbody></table></div>
</body>
<script>// 用户添加function addUser(){// 从页面中获取数据var name = $("#name").val();var age = $("#age").val();if (name == ''){alert("请输入名字")return}if ( age == ''){alert("请输入年龄")return}var data = {name:name,age:age,flag : "addUser"}// 发送请求$.post("user.do",data,function(result){console.log(result)if (result.code == 200){alert(result.message)location.reload()}});}</script>

其他同理不再赘述。。。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode算法笔记-算法复杂度

对于时间复杂度&#xff0c;主要包括三种情况&#xff1a; 渐进紧确界&#xff1a; O渐进上界&#xff1a; 渐进下界&#xff1a; 加法原则&#xff1a;不同的时间复杂度相加取阶数最高的 乘法原则&#xff1a;不同的时间复杂度相乘&#xff0c;结果为时间复杂度的乘积 阶乘…

古月居讲师/签约作者招募计划

机器人&#xff0c;作为一个集成了多学科技术的复杂系统&#xff0c;其开发过程充满了挑战。为了帮助开发者们更好地克服这些挑战&#xff0c;提升项目的开发效率和质量&#xff0c;古月居特别招募[博客签约作者/课程讲师]。如果您平常热爱记录、分享开发者经验的习惯&#xff…

数据分离和混淆矩阵的学习

1.明确意义 通过训练集建立模型的意义是对新的数据进行准确的预测&#xff08;测试集的准度高才代表good fit&#xff09;&#xff1b; 2.评估流程 3.单单利用准确率accuracy进行模型评估的局限性 模型一&#xff1a;一共1000个数据&#xff08;分别为900个1和100个0&#x…

代码审计平台sonarqube的安装及使用

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、使用sonarqube的目的四、sonarqube流程五、docker快速搭建sonarqube六、sonarqube scanner的安装和使用七、sonarqube对maven项目进行分析八、sonarqube分析报告解析九、代码扫描规则定制十…

Docker 使用 Fedora 镜像

Fedora 在 Docker 中的使用也非常简单&#xff0c;直接使用命令 docker run -it fedora:latest bash 就可以 pull 到本地的容器中并且运行。 C:\Users\yhu>docker run -it fedora:latest bash Unable to find image fedora:latest locally latest: Pulling from library/fed…

数据库笔记-【视图】

视图 视图通俗是企业想展示给用户看的&#xff0c;数据库存储的数据有很多&#xff0c;但是也有很多是不能对外公开的&#xff0c;做项目的过程就通过视图这个媒介达到这种效果 视图也可以保证数据库表结构字段的隐私安全等 create or replace view stu_v_1 as select id st…

C#反编译太容易了,转qt怎么样?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「qt的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;方案1&#xff1a;随机报错 反编都…

LoRA Land: 310个经微调的大语言模型可媲美GPT-4

摘要 低秩自适应 (LoRA) 已成为大语言模型 (LLM) 参数有效微调 (PEFT) 中最广泛采用的方法之一。LoRA 减少了可训练参数的数量和内存使用,同时达到了与全面微调相当的性能。该研究旨在评估在实际应用中训练和服务使用 LoRA 微调的 LLM 的可行性。首先,该研究测量了在 10 个基础…

如何使用恢复模式修复Mac启动问题?这里提供详细步骤

如果你的Mac无法启动,不要惊慌,Mac有一个隐藏的恢复模式,你可以使用它来诊断和修复任何问题,或者在需要时完全重新安装macOS。以下是如何使用它。 如何在Mac上启动到恢复模式 你需要做的第一件事是启动到恢复模式。尽管操作说明会因你使用的Mac电脑而异,但幸运的是,启动…

postman 使用教程

1. get 请求 &#xff1f;号后为 get 请求的参数 参数之间用符号"&" 分隔。 假设url 为&#xff1a;http://10.71.7.101/cgi-bin/gw-config.cgi?methodgetway_param&t1715658871647 复制进来到postman的地址栏 后 &#xff1f;后面的参数会自动添加到参…

kali linux2024.1版安装

1 基于 VMware 安装 Kali 系统 打开已经安装好的 VMware 程序&#xff0c;点击选项卡中的“主页”--》而后点击“创建新的虚拟机” 选择“典型(推荐)”&#xff0c;并点击“下一步” 客户机操作系统镜像选择&#xff1a;选择“稍后安装操作系统”&#xff0c;并点击“下一步”…

C#窗体程序设计笔记:如何调出控件工具箱,并设置控件的属性

文章目录 调出控件工具箱设置控件属性 调出控件工具箱 使用Visual Studio打开C#解决方案后&#xff0c;初始界面如下图所示&#xff1a; 接着&#xff0c;在上方的菜单栏依次选择“视图”“工具箱”&#xff0c;即可打开工具箱&#xff0c;如下图所示&#xff1a; 设置控件属…

STL----push,insert,empalce

push_back和emplace_back的区别 #include <iostream> #include <vector>using namespace std; class testDemo { public:testDemo(int n) :num(n) {cout << "构造函数" << endl;}testDemo(const testDemo& other) :num(other.num) {cou…

第 1 天_二分查找【算法基础】

第 1 天_二分查找 前言34. 在排序数组中查找元素的第一个和最后一个位置题解官方33. 搜索旋转排序数组题解官方74. 搜索二维矩阵 前言 这是陈旧已久的草稿2021-11-09 19:33:44 当时在学习数据结构&#xff0c;然后再LeetCode上找了一个算法基础。 但是后来又没做了。 现在20…

【考古篇】Attension is all you need

Transformer 文章目录 Transformer1. What2. Why3. How3.1 Encoder3.2 Decoder3.3 Attention3.4 Application3.5 Position-wise Feed-Forward Networks(The second sublayer)3.6 Embeddings and Softmax3.7 Positional Encoding3.8 Why Self-Attention 1. What A new simple n…

最新极空间部署iCloudpd教程,实现自动同步iCloud照片到NAS硬盘

【iPhone福利】最新极空间部署iCloudpd教程&#xff0c;实现自动同步iCloud照片到NAS硬盘 哈喽小伙伴们好&#xff0c;我是Stark-C~ 我记得我前年的时候发过一篇群晖使用Docker部署iCloudpd容器来实现自动同步iCloud照片的教程&#xff0c;当时热度还很高&#xff0c;可见大家…

CSS表格特殊样式

列组样式 使用colgroup与col标签配合可以定义列祖样式&#xff1a;例 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>table,tr,th,td{border: 1px solid #000;}table{border-collapse: coll…

【数据结构】顺序表与链表的差异

顺序表和链表都是线性表&#xff0c;它们有着相似的部分&#xff0c;但是同时也有着很大的差异。 存储空间上的差异&#xff1a; 对于插入上的不同点&#xff0c;顺序表在空间不够时需要扩容&#xff0c;而如果在使用realloc函数去扩容&#xff0c;会有原地扩容和异地扩容两种情…

Python图形复刻——绘制母亲节花束

各位小伙伴&#xff0c;好久不见&#xff0c;今天学习用Python绘制花束。 有一种爱&#xff0c;不求回报&#xff0c;有一种情&#xff0c;无私奉献&#xff0c;这就是母爱。祝天下妈妈节日快乐&#xff0c;幸福永远&#xff01; 图形展示&#xff1a; 代码展示&#xff1a; …

GCP谷歌云有什么数据库类型,该怎么选择

GCP谷歌云提供的数据库类型主要包括&#xff1a; 关系型数据库&#xff1a;这类数据库适用于结构化数据&#xff0c;通常用于数据结构不经常发生变化的场合。在GCP中&#xff0c;关系型数据库选项包括Cloud SQL和Cloud Spanner。Cloud SQL提供托管的MySQL、PostgreSQL和SQL Se…