AJAX学习笔记3练习

AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客

1.验证用户名是否可用

需求,用户输入用户名,失去焦点-->onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用

新建表

前端页面

WEB-INF下新建lib包引入依赖,要用JDBC

后端代码

package com.web;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.*;/*** @author hrui* @date 2023/9/3 22:11*/
@WebServlet("/checkusername")
public class AjaxRequestCheckName extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取用户名String username = req.getParameter("username");//打布尔标记(一种编程模型)boolean flag=false;//连接数据库校验用户名是否存在Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;//1.注册驱动//System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");try {Class.forName("com.mysql.cj.jdbc.Driver");//2.获取连接conn= DriverManager.getConnection("xxx", "xxx", "xxx");//3.获取执行对象String sql="select id,name from t_user where name=?";ps = conn.prepareStatement(sql);ps.setString(1, username);//4.执行sqlrs = ps.executeQuery();//5.处理结果集if(rs.next()){//如果只有一条的情况//用户名存在flag=true;}} catch (Exception e) {e.printStackTrace();}finally {if(rs!=null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!=null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}//响应结果到浏览器resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();if(flag){writer.print("<font color='red'>用户名存在,不可用</font>");}else{writer.print("<font color='green'>用户名可用</font>");}}public static void main(String[] args) {try {//Class.forName("com.mysql.cj.jdbc.Driver");Connection conn= DriverManager.getConnection("xxx", "xxx", "xxx");System.out.println(conn);} catch (Exception e) {e.printStackTrace();}}
}

还可以在input获得焦点时候对<span里面的数据清空

其实和input里面直接写  οnfοcus="xxx方法"  一样

2.用户点击按钮,发送AJAX请求  显示学院列表

测试

现在这种情况存在的问题是是后端代码又开始拼接HTML

能不能直接返回数据,剩下让前端处理   可以返回JSON  或者 XML

返回JSON数据

回顾JSON

也可以是这样

测试

上面是在JS代码中创建JSON对象,数组的访问

但是在后端返回前端时候,永远返回的都是字符串--->如何将JSON字符串转换为JSON对象呢

测试

下面后端就用JSON格式字符串的方式返回数据

下面去连接下数据库

前端

后端

package com.web;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.*;/*** @author hrui* @date 2023/9/3 23:57*/
@WebServlet("/studys")
public class AjaxRequestStudys extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//连接数据库,查询学院resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();StringBuilder builder=new StringBuilder();String jsonStr="";//        builder.append("<tr>");
//        builder.append("<td>1</td>");
//        builder.append("<td>张三</td>");
//        builder.append("<td>20</td>");
//        builder.append("<td>北京大兴区</td>");
//        builder.append("</tr>");
//        builder.append("<tr>");
//        builder.append("<td>2</td>");
//        builder.append("<td>李四</td>");
//        builder.append("<td>22</td>");
//        builder.append("<td>北京海淀区</td>");
//        builder.append("</tr>");//拼接一个JSON数组回去//builder.append("[");//用''单引号也不行 前端解析不了
//        builder.append("{'id':1,'name':'张三','age':20,'addr':'北京大兴区'},");
//        builder.append("{'id':2,'name':'李四','age':22,'addr':'北京海淀区'}");
//        builder.append("{\"id\":1,\"name\":\"张三\",\"age\":20,\"addr\":\"北京大兴区\"},");
//        builder.append("{\"id\":2,\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}");//连接数据库校验用户名是否存在Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;//1.注册驱动//System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");try {Class.forName("com.mysql.cj.jdbc.Driver");//2.获取连接conn= DriverManager.getConnection("xxx", "xxx", "xxx");//3.获取执行对象String sql="select id,name,age,addr from t_stu";ps = conn.prepareStatement(sql);//4.执行sqlrs = ps.executeQuery();//5.处理结果集builder.append("[");while(rs.next()){//如果只有一条的情况String id = rs.getString("id");String name = rs.getString("name");String age = rs.getString("age");String addr = rs.getString("addr");//{"id":1,"name":"zhangsan","age":13,"addr":"北京大兴区"}builder.append("{\"id\":"+id+",\"name\":\""+name+"\",\"age\":"+age+",\"addr\":\""+addr+"\"},");}//去掉最后一个{},后面的逗号jsonStr=builder.substring(0, builder.length()-1)+"]";} catch (Exception e) {e.printStackTrace();}finally {if(rs!=null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!=null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}writer.print(jsonStr);}
}

测试

这样拼接JSON太麻烦   使用fastjson对程序进行改进

引入jar包

不需要那么麻烦进行拼接

package com.web;import com.alibaba.fastjson.JSON;
import com.pojo.Student;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.*;
import java.util.ArrayList;
import java.util.List;/*** @author hrui* @date 2023/9/3 23:57*/
@WebServlet("/studys")
public class AjaxRequestStudys extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//连接数据库,查询学院resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();
//        StringBuilder builder=new StringBuilder();
//        String jsonStr="";List<Student> list=new ArrayList<>();//        builder.append("<tr>");
//        builder.append("<td>1</td>");
//        builder.append("<td>张三</td>");
//        builder.append("<td>20</td>");
//        builder.append("<td>北京大兴区</td>");
//        builder.append("</tr>");
//        builder.append("<tr>");
//        builder.append("<td>2</td>");
//        builder.append("<td>李四</td>");
//        builder.append("<td>22</td>");
//        builder.append("<td>北京海淀区</td>");
//        builder.append("</tr>");//拼接一个JSON数组回去//builder.append("[");//用''单引号也不行 前端解析不了
//        builder.append("{'id':1,'name':'张三','age':20,'addr':'北京大兴区'},");
//        builder.append("{'id':2,'name':'李四','age':22,'addr':'北京海淀区'}");
//        builder.append("{\"id\":1,\"name\":\"张三\",\"age\":20,\"addr\":\"北京大兴区\"},");
//        builder.append("{\"id\":2,\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}");//连接数据库校验用户名是否存在Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;String s="";//1.注册驱动//System.setProperty("jdbc.drivers","com.mysql.cj.jdbc.Driver");try {Class.forName("com.mysql.cj.jdbc.Driver");//2.获取连接conn= DriverManager.getConnection("xxx", "xxx", "xxx");//3.获取执行对象String sql="select id,name,age,addr from t_stu";ps = conn.prepareStatement(sql);//4.执行sqlrs = ps.executeQuery();//5.处理结果集//builder.append("[");while(rs.next()){//如果只有一条的情况String id = rs.getString("id");String name = rs.getString("name");String age = rs.getString("age");String addr = rs.getString("addr");//{"id":1,"name":"zhangsan","age":13,"addr":"北京大兴区"}//builder.append("{\"id\":"+id+",\"name\":\""+name+"\",\"age\":"+age+",\"addr\":\""+addr+"\"},");Student stu=new Student(id,name,age,addr);list.add(stu);}//去掉最后一个{},后面的逗号//jsonStr=builder.substring(0, builder.length()-1)+"]";s = JSON.toJSONString(list);} catch (Exception e) {e.printStackTrace();}finally {if(rs!=null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!=null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}writer.print(s);}
}

测试

下面用XML进行数据交互(XML体积大,现在相对用的少)

后端代码   注意下Content-Type

@WebServlet("/xmlstudys")
public class AjaxRequestXML extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//注意响应类型是XMLresp.setContentType("text/xml;charset=utf-8");PrintWriter writer = resp.getWriter();StringBuilder xml=new StringBuilder();/*XML格式<Students><Student><id>1</id><name>张三</name><age>22</age><addr>北京大兴区</addr></Student><Student><id>2</id><name>李四</name><age>23</age><addr>北京海淀区</addr></Student></Students>*/xml.append("<Students>");xml.append("<Student>");xml.append("<id>1</id>");xml.append("<name>张三</name>");xml.append("<age>22</age>");xml.append("<addr>北京大兴区</addr>");xml.append("</Student>");xml.append("<Student>");xml.append("<id>2</id>");xml.append("<name>李四</name>");xml.append("<age>23</age>");xml.append("<addr>北京海淀区</addr>");xml.append("</Student>");xml.append("</Students>");writer.print(xml);}
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用XML完成数据交互</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){//服务器响应XML字符串,如何接收//使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)var xmlDoc=this.responseXML;console.log(xmlDoc)}else{}}}xhr.open("get","/ajax/xmlstudys",true)//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")xhr.send()}}
</script><input type="button" value="显示学生列表" id="btn"><table width="50%" border="1px"><tr><th>序号</th><th>姓名</th><th>年龄</th><th>住址</th></tr><tbody id="stubody"><!--        <tr>--><!--            <td>1</td>--><!--            <td>张三</td>--><!--            <td>20</td>--><!--            <td>北京大兴区</td>--><!--        </tr>--><!--        <tr>--><!--            <td>2</td>--><!--            <td>李四</td>--><!--            <td>22</td>--><!--            <td>北京海淀区</td>--><!--        </tr>--></tbody>
</table>
</body>
</html>

测试

具体前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用XML完成数据交互</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){//服务器响应XML字符串,如何接收//使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)var xmlDoc=this.responseXML;console.log(xmlDoc)//获取所有<student>元素,返回了多个对象,是个数组var students=xmlDoc.getElementsByTagName("student")console.log(students[0].nodeName)var html=""for(var i=0;i<students.length;i++){var stu=students[i]//获取<student>节点下所有子元素var s=stu.childNodes;html+="<tr>"for(var j=0;j<s.length;j++){var node=s[j]if(node.nodeName=="id"){console.log("id="+node.textContent)html+="<td>"+node.textContent+"</td>"}if(node.nodeName=="name"){console.log("name="+node.textContent)html+="<td>"+node.textContent+"</td>"}if(node.nodeName=="age"){console.log("age="+node.textContent)html+="<td>"+node.textContent+"</td>"}if(node.nodeName=="addr"){console.log("addr="+node.textContent)html+="<td>"+node.textContent+"</td>"}}html+="</tr>"}document.getElementById("stubody").innerHTML=html}else{}}}xhr.open("get","/ajax/xmlstudys",true)//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")xhr.send()}}
</script><input type="button" value="显示学生列表" id="btn"><table width="50%" border="1px"><tr><th>序号</th><th>姓名</th><th>年龄</th><th>住址</th></tr><tbody id="stubody"><!--        <tr>--><!--            <td>1</td>--><!--            <td>张三</td>--><!--            <td>20</td>--><!--            <td>北京大兴区</td>--><!--        </tr>--><!--        <tr>--><!--            <td>2</td>--><!--            <td>李四</td>--><!--            <td>22</td>--><!--            <td>北京海淀区</td>--><!--        </tr>--></tbody>
</table>
</body>
</html>

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

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

相关文章

​7.1 项目1 学生通讯录管理：文本文件增删改查（C++版本）(自顶向下设计+断点调试) (A)​

​7.1 项目1 学生通讯录管理：文本文件增删改查（C++版本）(自顶向下设计+断点调试) (A)​

C自学精简教程 目录(必读) 作业目标&#xff1a; 这个作业中&#xff0c;你需要综合运用之前文章中的知识&#xff0c;来解决一个相对完整的应用程序。 作业描述&#xff1a; 1 在这个作业中你需要在文本文件中存储学生通讯录的信息&#xff0c;并在程序启动的时候加载这些…
阅读更多...
RHCA之路---EX280(6)

RHCA之路---EX280(6)

RHCA之路—EX280(6) 1. 题目 Create an application greeter in the project samples which uses the Docker image registry.lab.example.com/openshift/hello-openshift so that it is reachable at the following address only: https://greeter.apps.lab.example.com (Not…
阅读更多...
目标检测框架MMDetection训练自定义数据集实验记录

目标检测框架MMDetection训练自定义数据集实验记录

在上一篇博文中&#xff0c;博主完成了MMDetection框架的环境部署与推理过程&#xff0c;下面进行该框架的训练过程&#xff0c;训练的入口文件为tools/train.py&#xff0c;我们需要配置的内容如下&#xff1a; parser.add_argument(--config,default"/home/ubuntu/prog…
阅读更多...
ApiPost7使用介绍 | HTTP Websocket

ApiPost7使用介绍 | HTTP Websocket

一、基本介绍 创建项目&#xff08;团队下面可以创建多个项目节点&#xff0c;每个项目可以创建多个接口&#xff09;&#xff1a; 参数描述库&#xff08;填写参数时自动填充描述&#xff09;&#xff1a; 新建环境&#xff08;前置URL、环境变量很有用&#xff09;&#x…
阅读更多...
建筑结构健康监测系统：智能监测建筑结构健康状况

建筑结构健康监测系统：智能监测建筑结构健康状况

大型公共建筑因其投资大、结构形式复杂、建设工期长、施工工艺复杂、使用年限长等特点。在使用期间受超常荷载、材料老化、构件缺陷等因素的作用&#xff0c;结构将逐渐产生损伤累积&#xff0c;从而使结构的承载能力降低&#xff0c;抵抗自然灾害的能力下降。如遇地震、台风等…
阅读更多...
TiDB x 安能物流丨打造一栈式物流数据平台

TiDB x 安能物流丨打造一栈式物流数据平台

作者&#xff1a;李家林 安能物流数据库团队负责人 本文以安能物流作为案例&#xff0c;探讨了在数字化转型中&#xff0c;企业如何利用 TiDB 分布式数据库来应对复杂的业务需求和挑战。 安能物流作为中国领先的综合型物流集团&#xff0c;需要应对大规模的业务流程&#xff…
阅读更多...
定时任务job (现成直接用)

定时任务job (现成直接用)

1. 任务调度的2种方式 1. bean调用示例: 对应的类上加Component或Service注解, 类名.方法名(ryTask.ryNoParams) 类名首字母小写; 该类必须要在com.ruoyi 包下, 因为有校验 2. 权限类名调用示例: com.ruoyi.quartz.task.RyTask.ryNoParams 注意: class(类名)调用的时候, 只能调…
阅读更多...
【java】【项目实战】[外卖九]项目优化（缓存）

【java】【项目实战】[外卖九]项目优化（缓存）

目录 一、问题说明 二、环境搭建 2.1 Git管理代码 2.1.1 创建本地仓库 2.1.2 创建远程仓库 2.1.3 创建分支--》推送到远程仓库 2.2 maven坐标 2.3 配置文件application.yml 2.4 配置类RedisConfig 三、缓存短信验证码 3.1 实现思路 3.2 代码改造 3.2.1 UserContro…
阅读更多...
电商实战项目（java）知识点整理（持续更新）《苍穹外卖》

电商实战项目（java）知识点整理（持续更新）《苍穹外卖》

一、重要知识点精讲 1.1 nginx反向代理 1. nginx反向代理好处&#xff1a; 1. 提高访问速度&#xff08;可以进行缓存&#xff0c;如果访问相同资源可以直接响应数据&#xff09; 2. 可以进行负载均衡&#xff08;如果没有nginx前端只能固定地访问后端某一台服务器&#xf…
阅读更多...
真香：Alibaba开源GitHub星标100K微服务架构全彩进阶手册

真香：Alibaba开源GitHub星标100K微服务架构全彩进阶手册

前言&#xff1a; 微服务架构作为一种高效灵活的应用架构&#xff0c;正在成为企业级应用开发的主流选择。在众多的微服务架构指南中&#xff0c;阿里巴巴开源的GitHub微服务架构全彩进阶手册备受瞩目&#xff0c;其100star更是证明了其在开发者社区中的重要地位。 这本手册汇…
阅读更多...
Linux下 /sys/class 一些操作

Linux下 /sys/class 一些操作

Linux下&#xff0c;/dev、/sys/class的区别 /dev下面有很多节点&#xff0c;每一个节点代表一个设备&#xff0c;/dev目录下面是按物理器件进行分类&#xff1b;而/sys/class下面的更多是按功能抽象出来的。 参考1 demo 在正点原子的基础上进行演示 #include <linux/ty…
阅读更多...
Android开机动画

Android开机动画

Android开机动画 1、BootLoader开机图片2、Kernel开机图片3、系统启动时&#xff08;BootAnimation&#xff09;动画3.1 bootanimation.zip位置3.2 bootanimation启动3.3 SurfaceFlinger启动bootanimation3.4 播放开机动画playAnimation3.6 开机动画退出检测3.7 简易时序图 4、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023