使用 AJAX+JSON 实现用户查询/添加功能

忘是亡心i 2024-03-27 09:00 87阅读 0赞

#### 实现用户查询/添加功能 ####

*  1. 查询功能
 *   *  准备
     *  selectAllServlet：
     *  brand.html：
 *  2. 添加功能
 *   *  addBrand.html：
     *   *  表单：
         *  <script：
     *  addServlet：

## 1. 查询功能 ##

**需求**：在onload（页面加载完成）事件触发后，完成品牌列表查询；  
![在这里插入图片描述][342ff7f1c8a744aeadc18d0252a2eadb.png]

*  在brand.html页面【加载完成之后】，通过AJAX发送请求给Servlet；
 *  Servlet将List数据转换为JSON写回response，返回浏览器；
 *  客户端收到响应，执行**回调函数**，在页面遍历数组并展示数据；

### 准备 ###

引入`fastjson`，用于JSON的序列化和反序列化操作；  
![在这里插入图片描述][a512dcdc6cd04e38a9f7dceec62dc5ae.png]

**目录**：  
![在这里插入图片描述][b11f4c2d71654c51acb541918b454d6c.png]

### selectAllServlet： ###

*  注意数据中含有**中文**，在响应字节数据之前使用`setContentType()`，注意参数由 `text/html`变为 `text/json`；
 *  调用`JSON.toJSONString` 将查询结果List **`序列化`** 为JSON（本质是字符串）；
 *  然后将序列化后的JSON**字符串**写入response传回；

(brandService是写的MyBastis那一套，并返回查询结果)

![在这里插入图片描述][26199766936a4e918ace5df94938a98f.png]

### brand.html： ###

*  首先发送请求是要在onload 页面加载完之后才发，所以整个逻辑在`window.onload` 绑定的的函数内；
 *  页面完成之后，准备发送AJAX请求给Servlet，SQL的请求方式为GET，DML为POST：
 *  设置**回调函数**，`resp.data` 就是selectAllServlet返回的JSON数组；
 *  遍历数组，将数据放到 表格中：  
    1.先创建一个字符串tablestr，放入表头；  
    2.将JSON数组的属性放入tableData拼接出表格的格式：  
    3.最后将tableData设置为表格的innerHTML属性数据；

![在这里插入图片描述][8ed7240b69864ed98f644fa235167624.png]  
…

**<script**：  
整个逻辑在onload事件绑定的函数内；  
![在这里插入图片描述][b7848a2c8af148a68d0dda728d3396da.png]  
JSON可以像对象一样用 json **.** name 获取使用其属性；  
![在这里插入图片描述][ea69b91592c345dfbb94fa9f5884d0c4.png]

**效果**：

访问localhost:8080/brand-demo/brand.html ，直接显示查询的列表结果：  
![在这里插入图片描述][cf9718d74db4417baa64e0f7f1aee607.png]

## 2. 添加功能 ##

**需求**：客户端点击button后，服务端将浏览器输入参数添加到数据库（需要使用JSON的反序列化）

![在这里插入图片描述][a5e0c11503df482cb9bcd9378740d727.png]

*  浏览器点击button通过AJAX 将JSON数据提交到servlet；（注意这里不是submit！）
 *  服务端收到从requst获取的数据，添加到数据库，添加完后发出响应；
 *  浏览器获取响应，如果添加成功则跳转到brand.html（然后在进行查询列表操作）；

### addBrand.html： ###

**注意**：  
1. 请求是`JSON`格式，由AJAX发给Servlet，所以表单的`action` 不写Servlet访问路径；  
2. 这里是 **button** 不是 **submit ！**  
**submit是`同步`的请求**， 而button没有提交表单的功能，数据提交由AJAX来实现，而且是**异步**请求；  
传递的是`JSON`格式！  
3.DML一般使用POST的方式请求；

#### 表单： ####

![在这里插入图片描述][27da51258c1d4745a2f6fbc62078d47b.png]

#### <script： ####

*  用户点击按钮触发button绑定的函数，客户端会将数据以JSON方式（封装到js对象）发送到servlet；
 *  服务端接收并反序列化数据为User对象，添加到数据库；
 *  客户端收到响应后，判断响应是否为suecess，是则表示添加成功，则页面**跳转**到brand.html（通过设置 location.href进行跳转） ；

**注意**：

1.  表单数据如何通过AJAX发送到servlet ? ------表单数据要转为JSON ！
2.  先建立一个fomatData的**js对象**，写入brand对象的格式；
3.  通过id获取Element对象，以此从表单获取数据，

载入axios；  
![在这里插入图片描述][ca6074b514544ceab99acad80651efbb.png]  
整个逻辑在onclick单击事件出绑定的函数中；

![在这里插入图片描述][90b4d426049c4d1e95ad46c0f9b4083e.png]  
此处省略剩下的表单数据…  
将用户输入的表单数据全都封装在**js对象**中；  
特殊：status有两个值，单选框radio类型的cheked属性为true即为选中，然后把status赋值给js对象；

再将**js对象** formatData作为Data传给servlet：  
![在这里插入图片描述][1bcbb33d469a47e8b5b2d57d8a969215.png]

### addServlet： ###

*  在servlet获取HTTP请求报文的请求体，再调用JOSN.parseObject()**反序列化**为Java对象！
 *  将对象放入response传给客户端；

**注意**：

1.  由于AJAX使用了POST的方式请求，数据在请求体中，使用`request.getReader()` 读取；
2.  **`request.getParameter()`的方式不能接收JSON格式的数据！** 这个方法切割的是HTTP请求报文的字符串；而JSON 的格式不一样！
3.  JSON数据不管多长都是一行！

![在这里插入图片描述][177b385e40da4bdf898f8b146b308149.png]  
添加成功就响应 “success”；

**效果**：  
访问addBrand.html：  
添加数据并提交，服务端会添加数据到数据库，然后返回success给客户端；  
![在这里插入图片描述][969e5d5860ac40219c1c08ee11b04b29.png]  
跳转到brand.html 并显示查询列表；  
![在这里插入图片描述][75558ec7c9064cbfad14e6269ad22c1e.png]

[342ff7f1c8a744aeadc18d0252a2eadb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/be2939b44e974fd58d8a45a9cb5b48af.png
[a512dcdc6cd04e38a9f7dceec62dc5ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c3291d61c4914ee880376b38ba535810.png
[b11f4c2d71654c51acb541918b454d6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1577779705b647eba0efb7c862145309.png
[26199766936a4e918ace5df94938a98f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5542affbbb6b46c4a612c84d9eac6a83.png
[8ed7240b69864ed98f644fa235167624.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8fe676d1d1d04888b0a45598e40a2015.png
[b7848a2c8af148a68d0dda728d3396da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/141d468aa1ee4e68a3ef34ce67dc0b5e.png
[ea69b91592c345dfbb94fa9f5884d0c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3a8f95f5b192479a9876076177b0ae5c.png
[cf9718d74db4417baa64e0f7f1aee607.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5bb032989b6741d29a1ed2e9ce39fdea.png
[a5e0c11503df482cb9bcd9378740d727.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/743509f62b754d0596359b0481387bd4.png
[27da51258c1d4745a2f6fbc62078d47b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f6a2d2bc576e4d659d8bd814a7ea21d4.png
[ca6074b514544ceab99acad80651efbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/53a519c81b9d41debac14c922fac5be5.png
[90b4d426049c4d1e95ad46c0f9b4083e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/31283da3a8364bf7812a83e2e99812bb.png
[1bcbb33d469a47e8b5b2d57d8a969215.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/fdb8afb2ca504a7bb1c37d2a59ef194a.png
[177b385e40da4bdf898f8b146b308149.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b23170cc006448e097d34bd420c594dd.png
[969e5d5860ac40219c1c08ee11b04b29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3cc28a58129b42c4bcc0f99ec48dd0b7.png
[75558ec7c9064cbfad14e6269ad22c1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f5bc42caa6414eecb45a37590680f70e.png