JavaWeb之AJAX

embedded/2024/11/18 8:29:41/

前言

这一节讲JavaWebAJAX

1.概述

在这里插入图片描述
在这里插入图片描述
以前我们在servlet中得到数据,必须通过域给jsp,然后jsp在响应给浏览器

纯html不能获取servlet返回数据
所以我们用jsp
但是现在我们可以同AJAX给返回数据了
我们可以在sevlet中直接通过AJAX返回给浏览器
html中的JavaScript就可以获取数据了
通过静态的html页面和AJAX联合起来,这个比较主流
这样html和AJAX主要由前端来完成就可以了
后面的我们后端来完成
因为jsp要由服务器启动,所以还是要后端来写,无法分工
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这个搜索的时候,我们没有刷新,它也会局部刷新,在数据库中打出的这些数据
或者我们输入用户名,鼠标一离开就会显示有没有这个用户
在这里插入图片描述
这种局部刷新就是异步
在这里插入图片描述
这里的异步就是服务器处理的三秒钟内,我们不用再浏览器等待,我们还可以干其他事情

同步左上角是会刷新的,异步就不会刷新显示出来
这个对于用户来说,没什么感知

2. 快速入门

在这里插入图片描述

第一就是后端代码,其余的都是前端代码
在这里插入图片描述
这个就是后端代码

Ajax是JavaScript的代码,要写在html里面去

https://www.w3school.com.cn/b.asp
这个网站有相关的教程
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
异步是默认的,所以可以不用写

在这里插入图片描述
这个就是全路径

在这里插入图片描述

在这里插入图片描述
点的是下一页
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
但我们这个不能运行出我们想要的结果,可能是第一步创建搞错了

    <script>//1.创建核心对象,不用记,直接复制var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();}else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.发送请求xhttp.open("GET", "http://localhost:8080/brand-demo/ajaxServlet");//第二个参数就是你要请求的资源路径,异步的话,资源要写成全路径:http://localhost:8080/brand-demo/ajaxServlet//因为将来前端就是html+ajax开发了,前端的工程和后端的工程都不在一个服务器上部署,所以访问的话就要写绝对路径了,不要写相对路径了xhttp.send();//3.获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {// this.responseText;//获取数据,就是我们返回的hello ajax~数据alert(this.responseText);//在一个弹框里面打印}};</script>

在这里插入图片描述
我们这个修改后就可以了
在这里插入图片描述
在这里插入图片描述
那个servlet的xhr就是异步请求的意思

在这里插入图片描述
或者直接点这个上面的XHR,也可以筛选出来我们需要的异步请求

所以所谓AJAX其实也就是JavaScript里面可以获取响应数据的代码

3. 案例-验证用户是否存在

在这里插入图片描述

3.1 后端

        //1.接收用户名String username = request.getParameter("username");//2.调用service查询User对象,,,,,现在还没写service,我们只是模拟一下boolean flag = true;//相当于用户名存在//3.响应标记response.getWriter().write(""+flag);

在这里插入图片描述

3.2 前端

注册页面
这个注册页面可以去我的Gitee里面去找
这里我就直接复制了
而且这个不重要

在这里插入图片描述
在这里插入图片描述

这个就是我们以前的那个页面

在这里插入图片描述
我们就可以对这个username绑定一个onblur事件
在这里插入图片描述
修改style那里
在这里插入图片描述
在这里插入图片描述

<script>//1.给用户名输入框绑定  失去焦点事件document.getElementById("username").onblur=function(){//2.发送ajax//获取用户名的值  这个是给自己的输入框绑定的onblur事件,直接可以thisvar username=this.value;//2.1.创建核心对象,不用记,直接复制var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();}else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.2.发送请求xhttp.open("GET", "http://localhost:8080/brand-demo/selectUserServlet?username="+username);//把名字通过get传给servletxhttp.send();//2.3.获取响应-------》获取的是对应servlet的响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {if(this.responseText == "true"){//responseText获取的是字符串//用户名存在,显示提示信息document.getElementById("username_err").style.display='';//显示的话,display就是空字符串就可以了}else{//用户名不存在,清除提示信息-----》把style的属性设置一下document.getElementById("username_err").style.display='none';//这个就是设置style为不展示}}};}
</script>

因为我们后台展示的是true,所以不管我们写什么,都是用户名已存在
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
光标离开就会发送一次请求,而且请求还是xhr的异步请求
在这里插入图片描述
而且这个请求响应的数据还是true

Axios_173">4. Axios异步框架

4.1 基本使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
axios文件也是直接复制就可以了
在这里插入图片描述
在创建一个html文件
02-axios-demo.html:

在这里插入图片描述
AxiosServlet:
在这里插入图片描述

02-axios-demo.html:

<!--引入axios的源码文件-->
<script src="js/axios-0.18.0.js"></script>
<script>//1.getaxios({method:"get",// url就是我们请求的路径,就是servlet的路径     .then就是来获取响应的url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"}).then(function(resp){alert(resp.data);//这个就能获取到响应的数据---》hello axios})
</script>

在这里插入图片描述
在这里插入图片描述
这样我们就可以了

在这里插入图片描述
02-axios-demo.html:

  axios({method:"post",// url就是我们请求的路径,就是servlet的路径     .then就是来获取响应的url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"}).then(function(resp){alert(resp.data);// //这个就能获取到响应的数据---》hello axios})

在这里插入图片描述
这样就是post的了
在这里插入图片描述
在这里插入图片描述
这个就要比原生的ajax代码要简化很多

4.2 请求方式别名

在这里插入图片描述

在这里插入图片描述

  axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (res) {alert(res.data);})

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (res) {alert(res.data);})

在这里插入图片描述
在这里插入图片描述

JSON_250">5. JSON

在这里插入图片描述

所以我们响应数据都用JSON

5.1 基本语法

在这里插入图片描述

    <script>//定义jsonvar json={"name":"zhangsan","age":23,"addr":["北京","上海","西安"]};//获取值alert(json.name);</script>

在这里插入图片描述
在这里插入图片描述

JSONJava_272">5.2 JSON数据和Java对象转换

在这里插入图片描述

在这里插入图片描述

    <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>

下面这个是user对象
在这里插入图片描述
测试方法

        //1.将Java对象转换为JSON字符串User user = new User();user.setId(1);user.setUsername("zhangsan");user.setPassword("123");String jsonString= JSON.toJSONString(user);System.out.println(jsonString);

在这里插入图片描述
在这里插入图片描述

        User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);System.out.println(u);

在这里插入图片描述

6. 案例

6.1 查询所有

在这里插入图片描述

在这里插入图片描述
现在我们导入一个工程
在这里插入图片描述
在这里插入图片描述
brand.html:
在这里插入图片描述

<script>//1.当页面加载完成之后,发送ajax请求//创建一个窗口,并添加事件,这个事件是在整个页面加载完成之后,自动加载的window.onload = function () {//2.发送ajax请求axios({method: 'get',url:""}).then(function (resp) {})}
</script>

在这里插入图片描述
SelectAllServlet:

        //1.调用service查询List<Brand> brands = brandService.selectAll();//2.将集合转换为JSON数据   序列化String jsonString = JSON.toJSONString(brands);//3.响应数据response.setContentType("text/json;charset=utf-8");//处理中文response.getWriter().write(jsonString);

在这里插入图片描述
测试一下
在这里插入图片描述
brand.html:
在这里插入图片描述

测试一下

在这里插入图片描述
因为原来的表格一旦完成就马上执行这个了,所以看不到原来的表格


<script src="js/axios-0.18.0.js">
</script><script>//1.当页面加载完成之后,发送ajax请求//创建一个窗口,并添加事件,这个事件是在整个页面加载完成之后,自动加载的window.onload = function () {//2.发送ajax请求axios({method: 'get',url:"http://localhost:8080/brand1-demo/selectAllServlet"}).then(function (resp) {//获取数据,遍历数组let brands = resp.data;//这个就是数组,,,,,也是JSON数据    直接点加Data名称就可以获得数据let tableData="    <tr>\n" +"        <th>序号</th>\n" +"        <th>品牌名称</th>\n" +"        <th>企业名称</th>\n" +"        <th>排序</th>\n" +"        <th>品牌介绍</th>\n" +"        <th>状态</th>\n" +"        <th>操作</th>\n" +"    </tr>";for (let i = 0; i < brands.length; i++) {let brand = brands[i];//放入表格里面去tableData+="    <tr align=\"center\">\n" +"        <td>"+(i+1)+"</td>\n" +"        <td>"+brand.brandName+"</td>\n" +"        <td>"+brand.companyName+"</td>\n" +"        <td>"+brand.ordered+"</td>\n" +"        <td>"+brand.description+"</td>\n" +"        <td>"+brand.status+"</td>\n" +"\n" +"        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +"    </tr>";}document.getElementById("brandTable").innerHTML=tableData;//设置表格数据})}
</script>

在这里插入图片描述

6.2 新增品牌

在这里插入图片描述
addBrand.html:
在这里插入图片描述
AddServlet:
在这里插入图片描述
测试一下
在这里插入图片描述
在这里插入图片描述
这样就说明了getParameter方法无法获取JSON的数据格式
这个不能接受JSON数据格式,,因为这个是把字符串按照&和等号切割的,JSON是没有的,{brandName: “华为”},它长这个样子

在这里插入图片描述
在这里插入图片描述

        //1.接收数据
//        String brandName = request.getParameter("brandName");//这个不能接受JSON数据格式,,因为这个是把字符串按照&和等号切割的,JSON是没有的,{brandName: "华为"},它长这个样子
//        System.out.println(brandName);//获取请求体数据BufferedReader br = request.getReader();String params = br.readLine();//因为json只有一行//将JSON字符串转为Java对象Brand brand= JSON.parseObject(params, Brand.class);System.out.println(brand);//2.调用service添加brandService.add(brand);//3.响应成功标识response.getWriter().write("success");

在这里插入图片描述
addBrand.html:
在这里插入图片描述
最后就是Data那里,数据必须是真实的

现在开始处理一下表单的数据—》转为JSON

<script src="js/axios-0.18.0.js">
</script><script>
// <!--    我们不需要正常提交表单了,---》直接一个普通的按钮就可以了,不用submit按钮了,因为我们要的是异步的,
// 传递的是异步的请求格式,,所以不需要指定action,因为指定了action,就会url变-->
// 1.给按钮绑定单击事件
document.getElementById("btn").onclick = function () {//点击提交按钮,数据都填了----->document.getElementById("brandName").value--->就是获取brandName你填写的值// var formData={//     brandName:document.getElementById("brandName").value,//     companyName:document.getElementById("companyName").value,//     ordered:document.getElementById("ordered").value,//     description:document.getElementById("description").value,//     status:document.getElementById("status").value,// }//或者这样var formData={brandName:"",companyName:"",ordered:"",description:"",status:""}let brandName=document.getElementById("brandName").value;//获取数据formData.brandName=brandName;//设置数据let companyName=document.getElementById("companyName").value;//获取数据formData.companyName=companyName;//设置数据let ordered=document.getElementById("ordered").value;//获取数据formData.ordered=ordered;//设置数据let description=document.getElementById("description").value;//获取数据formData.description=description;//设置数据// let status=document.getElementById("brandName").value;//获取数据// formData.brandName=brandName;//设置数据//但是status没有id,状态是禁用还是启用?,它有两个标签的--》一次性获取两个标签,哪个被选中了就是谁let status=document.getElementsByName("status");for(let i=0;i<status.length;i++){if(status[i].checked){//表示这个被选中了{formData.status=status[i].value;}}console.log(formData);//把这个打印到控制台上//2。发送ajax请求axios({method: 'post',url:"http://localhost:8080/brand1-demo/addServlet",data:formData}).then(function (resp) {//判断响应数据是否为success,如果是说明添加成功,并跳回展示页面if(resp.data =="success"){location.href="http://localhost:8080/brand1-demo/brand.html";}})
}
</script>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

下一节讲Vue
Gitee


http://www.ppmy.cn/embedded/138483.html

相关文章

【HarmonyOS】应用实现读取剪切板内容(安全控件和自读取)

【HarmonyOS】应用实现读取粘贴板内容(安全控件和自读取) 前言 三方应用 读取系统剪切板是比较常见的功能。可以实现功能入口的快捷激活跳转&#xff0c;以及用户粘贴操作的简化&#xff0c;增强用户的体验感。 但是在用户日渐注重隐私的今天&#xff0c;系统对于剪切板权限的…

01_Spring开胃菜

一、 为什么是Spring? 在正式进入Spring内容前我们先看看我们以往经典的程序设计。 当我们去登录时,会调用后端的Controller,Controller接收到用户的请求后会调用业务层的Service进行登录的业务处理,Service业务处理过程中会调用Dao层向DB获取数进行判断。 接下来我们用代…

软考教材重点内容 信息安全工程师 第 3 章 密码学基本理论

&#xff08;本章相对老版本极大的简化&#xff0c;所有与算法相关的计算全部删除&#xff0c;因此考试需要了解各个常 用算法的基本参数以及考试中可能存在的古典密码算法的计算&#xff0c;典型的例子是 2021 和 2022 年分别考了 DES 算法中的 S 盒计算&#xff0c;RSA 中的已…

c ++零基础可视化——数组

c 零基础可视化 数组 一些知识&#xff1a; 关于给数组赋值&#xff0c;一个函数为memset&#xff0c;其在cplusplus.com中的描述如下&#xff1a; void * memset ( void * ptr, int value, size_t num );Sets the first num bytes of the block of memory pointed by ptr to…

爬虫策略与反爬机制——爬虫常见策略

随着网络爬虫技术的日益发展&#xff0c;反爬机制也变得越来越复杂&#xff0c;网站和服务商不断加强对爬虫行为的监控和限制&#xff0c;开发者需要采取一系列有效的爬虫策略来提高爬虫的效率并规避反爬措施。本章将介绍一些常见的爬虫策略&#xff0c;帮助开发者应对不同情况…

POUF: Prompt-oriented unsupervised fine-tuning for large pre-trained models

Motivation 通过提示,大规模预训练模型变得更具表现力和强大,近年来引起了人们的极大关注。虽然这些大型模型具有zero-shot能力,但一般来说,仍然需要标记数据来使它们适应下游任务。为了克服这一关键限制,我们提出了一个无监督微调框架,直接对模型进行微调或对未标记的目…

python核心语法(二)

第三节 类型转换 0.布尔值转换 使⽤⼀个内置函数bool()。 # 以下值都为True bool(2) bool(-1) bool(255) bool(0.1000001) bool(-99.99888) # 下⾯的值为False bool(0) bool(0.0)对于数值类型&#xff0c;所有的⾮零值转换为True, 只有零值才转换为False.字符串也可以转换为…

flutter打包签名问题

总结 build.gradle只配置了release签名&#xff0c;没有配置debug签名的前提下 flutter build apk --debug或者flutter run 使用的都是系统下的默认签名文件 flutter build apk --release或者AS Build->Flutter->Build APK使用的是release签名 build.gradle配置了rel…