一站式建站企业网站和,建设银行网站不能打开,怎样建设网站空间,广告联盟推广前言
这一节讲JavaWeb之AJAX
1.概述 以前我们在servlet中得到数据#xff0c;必须通过域给jsp#xff0c;然后jsp在响应给浏览器
纯html不能获取servlet返回数据 所以我们用jsp 但是现在我们可以同AJAX给返回数据了 我们可以在sevlet中直接通过AJAX返回给浏览器 html中的J…前言
这一节讲JavaWeb之AJAX
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//因为将来前端就是htmlajax开发了前端的工程和后端的工程都不在一个服务器上部署所以访问的话就要写绝对路径了不要写相对路径了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).onblurfunction(){//2.发送ajax//获取用户名的值 这个是给自己的输入框绑定的onblur事件直接可以thisvar usernamethis.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?usernameusername);//把名字通过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.displaynone;//这个就是设置style为不展示}}};}
/script因为我们后台展示的是true所以不管我们写什么都是用户名已存在 光标离开就会发送一次请求而且请求还是xhr的异步请求 而且这个请求响应的数据还是true
4. Axios异步框架
4.1 基本使用 axios文件也是直接复制就可以了 在创建一个html文件 02-axios-demo.html AxiosServlet
02-axios-demo.html
!--引入axios的源码文件--
script srcjs/axios-0.18.0.js/script
script//1.getaxios({method:get,// url就是我们请求的路径就是servlet的路径 .then就是来获取响应的url:http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan}).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:usernamezhangsan}).then(function(resp){alert(resp.data);// //这个就能获取到响应的数据---》hello axios})这样就是post的了 这个就要比原生的ajax代码要简化很多
4.2 请求方式别名 axios.get(http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan).then(function (res) {alert(res.data);})axios.post(http://localhost:8080/ajax-demo/axiosServlet,usernamezhangsan).then(function (res) {alert(res.data);})5. JSON 所以我们响应数据都用JSON了
5.1 基本语法 script//定义jsonvar json{name:zhangsan,age:23,addr:[北京,上海,西安]};//获取值alert(json.name);/script5.2 JSON数据和Java对象转换 dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.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) {})}
/scriptSelectAllServlet //1.调用service查询ListBrand brands brandService.selectAll();//2.将集合转换为JSON数据 序列化String jsonString JSON.toJSONString(brands);//3.响应数据response.setContentType(text/json;charsetutf-8);//处理中文response.getWriter().write(jsonString);测试一下 brand.html:
测试一下 因为原来的表格一旦完成就马上执行这个了所以看不到原来的表格 script srcjs/axios-0.18.0.js
/scriptscript//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(i1)/td\n tdbrand.brandName/td\n tdbrand.companyName/td\n tdbrand.ordered/td\n tdbrand.description/td\n tdbrand.status/td\n \n tda href\#\修改/a a href\#\删除/a/td\n /tr;}document.getElementById(brandTable).innerHTMLtableData;//设置表格数据})}
/script6.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 srcjs/axios-0.18.0.js
/scriptscript
// !-- 我们不需要正常提交表单了---》直接一个普通的按钮就可以了不用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 brandNamedocument.getElementById(brandName).value;//获取数据formData.brandNamebrandName;//设置数据let companyNamedocument.getElementById(companyName).value;//获取数据formData.companyNamecompanyName;//设置数据let ordereddocument.getElementById(ordered).value;//获取数据formData.orderedordered;//设置数据let descriptiondocument.getElementById(description).value;//获取数据formData.descriptiondescription;//设置数据// let statusdocument.getElementById(brandName).value;//获取数据// formData.brandNamebrandName;//设置数据//但是status没有id状态是禁用还是启用,它有两个标签的--》一次性获取两个标签哪个被选中了就是谁let statusdocument.getElementsByName(status);for(let i0;istatus.length;i){if(status[i].checked){//表示这个被选中了{formData.statusstatus[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.hrefhttp://localhost:8080/brand1-demo/brand.html;}})
}
/script总结
下一节讲Vue Gitee
