前端Ajax异步请求之小白教程（下）

3，Ajax 案例

6.1 需求

使用Axios + JSON 完成品牌列表数据查询和添加。

6.2 查询所有功能

如上图所示就该功能的整体流程。前后端需以 JSON 格式进行数据的传递；由于此功能是查询所有的功能，前端发送 ajax 请求不需要携带参数，而后端响应数据需以如下格式的 json 数据

6.2.1 环境准备

百度网盘资源
链接：https://pan.baidu.com/s/1FXY1jZaCBlkvWkvUES56nQpwd=opdj
提取码：opdj
–来自百度网盘超级会员V2的分享

将 以上网盘中 brand-demo 工程拷贝到我们自己 工作空间 ，然后再将项目导入到我们自己的 Idea 中。

注意：

• 在给定的原始工程中已经给定一些代码。而在此案例中我们只关注前后端交互代码实现
• 要根据自己的数据库环境去修改连接数据库的信息，在 mybatis-config.xml 核心配置文件中修改

6.2.2 后端实现

在 com.ligong.web 包下创建名为 SelectAllServlet 的 servlet，具体的逻辑如下：

• 调用 service 的 selectAll() 方法进行查询所有的逻辑处理
• 将查询到的集合数据转换为 json 数据。我们将此过程称为 序列化；如果是将 json 数据转换为 Java 对象，我们称之为 反序列化
• 将 json 数据响应回给浏览器。这里一定要设置响应数据的类型及字符集 response.setContentType("text/json;charset=utf-8");

SelectAllServlet 代码如下：

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2 把集合转换成json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(brands);

        //3. 响应数据  application/json   text/json
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

6.2.3 前端实现

1. 引入 js 文件

在 brand.html 页面引入 axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

2. 绑定 页面加载完毕 事件

在 brand.html 页面绑定加载完毕事件，该事件是在页面加载完毕后被触发，代码如下

window.onload = function() {
	
}

3. 发送异步请求

在页面加载完毕事件绑定的匿名函数中发送异步请求，代码如下：

 //2. 发送ajax请求
axios({