加强网站建设和管理的通知,长春做网站网站,如何建设软件下载网站,电子商务和网站开发 职务JavaWeb--案例#xff08;AxiosJSON#xff09;1 需求2 查询所有功能2.1 环境准备2.2 后端实现2.3 前端实现2.4 测试3 添加品牌功能3.1 后端实现3.2 前端实现3.3 测试1 需求
使用Axios JSON 完成品牌列表数据查询和添加。页面效果还是下图所示#xff1a; 2 查询所有功能 …
JavaWeb--案例AxiosJSON1 需求2 查询所有功能2.1 环境准备2.2 后端实现2.3 前端实现2.4 测试3 添加品牌功能3.1 后端实现3.2 前端实现3.3 测试1 需求
使用Axios JSON 完成品牌列表数据查询和添加。页面效果还是下图所示 2 查询所有功能 如上图所示就该功能的整体流程。前后端需以 JSON 格式进行数据的传递由于此功能是查询所有的功能前端发送 ajax 请求不需要携带参数而后端响应数据需以如下格式的 json 数据 2.1 环境准备
将 02-AJAX\04-资料\3. 品牌列表案例\初始工程 下的 brand-demo 工程拷贝到我们自己 工作空间 然后再将项目导入到我们自己的 Idea 中。工程目录结构如下 其实之前做的brand-demo也可以 注意
在给定的原始工程中已经给定一些代码。而在此案例中我们只关注前后端交互代码实现要根据自己的数据库环境去修改连接数据库的信息在 mybatis-config.xml 核心配置文件中修改 2.2 后端实现
在 com.suki.web 包下创建名为 SelectAllServlet 的 servlet具体的逻辑如下
调用 service 的 selectAll() 方法进行查询所有的逻辑处理将查询到的集合数据转换为 json 数据。我们将此过程称为 序列化如果是将 json 数据转换为 Java 对象我们称之为 反序列化将 json 数据响应回给浏览器。这里一定要设置响应数据的类型及字符集 response.setContentType(text/json;charsetutf-8);
SelectAllServlet 代码如下
WebServlet(/selectAllServlet)
public class SelectAllServlet extends HttpServlet {private BrandService brandService new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 调用Service查询ListBrand brands brandService.selectAll();//2. 将集合转换为JSON数据 序列化String jsonString JSON.toJSONString(brands);//3. 响应数据 application/json text/jsonresponse.setContentType(text/json;charsetutf-8);response.getWriter().write(jsonString);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}2.3 前端实现
引入 js 文件
在 brand.html 页面引入 axios 的 js 文件
script srcjs/axios-0.18.0.js/script绑定 页面加载完毕 事件
在 brand.html 页面绑定加载完毕事件该事件是在页面加载完毕后被触发代码如下
window.onload function() {}发送异步请求
在页面加载完毕事件绑定的匿名函数中发送异步请求代码如下 //2. 发送ajax请求
axios({method:get,url:http://localhost:8080/brand-demo/selectAllServlet
}).then(function (resp) {});处理响应数据
在 then 中的回调函数中通过 resp.data 可以获取响应回来的数据而数据格式如下 现在我们需要拼接字符串将下面表格中的所有的 tr 拼接到一个字符串中然后使用 document.getElementById(brandTable).innerHTML 拼接好的字符串 就可以动态的展示出用户想看到的数据 而表头行是固定的所以先定义初始值是表头行数据的字符串如下
//获取数据
let brands resp.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;接下来遍历响应回来的数据 brands 拿到每一条品牌数据
for (let i 0; i brands.length ; i) {let brand brands[i];}紧接着就是从 brand 对象中获取数据并且拼接 数据行累加到 tableData 字符串变量中
tableData \n 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).innerHTML tableData;整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
a hrefaddBrand.htmlinput typebutton value新增/abr
hr
table idbrandTable border1 cellspacing0 width100%/tablescript srcjs/axios-0.18.0.js/scriptscript//1. 当页面加载完成后发送ajax请求window.onload function () {//2. 发送ajax请求axios({method:get,url:http://localhost:8080/brand-demo/selectAllServlet}).then(function (resp) {//获取数据let brands resp.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 \n 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).innerHTML tableData;})}
/script
/body
/html2.4 测试
访问http://localhost:8080/brand-demo/selectAllServlet 访问http://localhost:8080/brand-demo/brand.html 3 添加品牌功能 如上所示当我们点击 新增 按钮会跳转到 addBrand.html 页面。在 addBrand.html 页面输入数据后点击 提交 按钮就会将数据提交到后端而后端将数据保存到数据库中。
具体的前后端交互的流程如下 说明
前端需要将用户输入的数据提交到后端这部分数据需要以 json 格式进行提交数据格式如下 3.1 后端实现
在 com.suki.web 包下创建名为 AddServlet 的 servlet具体的逻辑如下 获取请求参数 由于前端提交的是 json 格式的数据所以我们不能使用 request.getParameter() 方法获取请求参数 如果提交的数据格式是 usernamezhangsanage23 后端就可以使用 request.getParameter() 方法获取如果提交的数据格式是 json后端就需要通过 request 对象获取输入流再通过输入流读取数据 将获取到的请求参数json格式的数据转换为 Brand 对象 调用 service 的 add() 方法进行添加数据的逻辑处理 将 json 数据响应回给浏览器。
AddServlet 代码如下
WebServlet(/addServlet)
public class AddServlet extends HttpServlet {private BrandService brandService new BrandService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收数据,request.getParameter 不能接收json的数据/* String brandName request.getParameter(brandName);System.out.println(brandName);*/// 获取请求体数据BufferedReader br request.getReader();String params br.readLine();// 将JSON字符串转为Java对象Brand brand JSON.parseObject(params, Brand.class);//2. 调用service 添加brandService.add(brand);//3. 响应成功标识response.getWriter().write(success);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}3.2 前端实现
在 addBrand.html 页面给 提交 按钮绑定点击事件并在绑定的匿名函数中发送异步请求代码如下
//1. 给按钮绑定单击事件
document.getElementById(btn).onclick function () {//2. 发送ajax请求axios({method:post,url:http://localhost:8080/brand-demo/addServlet,data:???}).then(function (resp) {// 判断响应数据是否为 successif(resp.data success){location.href http://localhost:8080/brand-demo/brand.html;}})
}现在我们只需要考虑如何获取页面上用户输入的数据即可。
首先我们先定义如下的一个 js 对象该对象是用来封装页面上输入的数据并将该对象作为上面发送异步请求时 data 属性的值。
// 将表单数据转为json
var formData {brandName:,companyName:,ordered:,description:,status:,
};接下来获取输入框输入的数据并将获取到的数据赋值给 formData 对象指定的属性。比如获取用户名的输入框数据并把该数据赋值给 formData 对象的 brandName 属性
// 获取表单数据
let brandName document.getElementById(brandName).value;
// 设置数据
formData.brandName brandName;说明其他的输入框都用同样的方式获取并赋值。但是有一个比较特殊就是状态数据如下图是页面内容 我们需要判断哪儿个被选中再将选中的单选框数据赋值给 formData 对象的 status 属性代码实现如下
let status document.getElementsByName(status);
for (let i 0; i status.length; i) {if(status[i].checked){//formData.status status[i].value ;}
}整体页面代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8title添加品牌/title
/head
body
h3添加品牌/h3
form action methodpost品牌名称input idbrandName namebrandNamebr企业名称input idcompanyName namecompanyNamebr排序input idordered nameorderedbr描述信息textarea rows5 cols20 iddescription namedescription/textareabr状态input typeradio namestatus value0禁用input typeradio namestatus value1启用brinput typebutton idbtn value提交
/formscript srcjs/axios-0.18.0.js/scriptscript//1. 给按钮绑定单击事件document.getElementById(btn).onclick function () {// 将表单数据转为jsonvar 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.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/brand-demo/addServlet,data:formData}).then(function (resp) {// 判断响应数据是否为 successif(resp.data success){location.href http://localhost:8080/brand-demo/brand.html;}})}
/script
/body
/html3.3 测试
访问http://localhost:8080/brand-demo/brand.html 点击新增跳转到下面页面: 添加数据 点击提交
说明
查询所有 功能和 添加品牌 功能就全部实现大家肯定会感觉前端的代码很复杂而这只是暂时的后面学习了 vue 前端框架后这部分前端代码就可以进行很大程度的简化。 学习笔记 from 黑马程序员 By – Suki 2023/3/10
