javaweb Ajax AXios异步框架 JSON 案例

AJAX概念：AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

AJAX作用：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

 

 

AJAX 快速入门

 相关代码可以在W3SCHOOL的AJAX页面直接复制

向服务器发送请求的时候 url要写访问的绝对路径，因为前后端分离，服务器不一样

4表示请求完成并且响应已就绪 

200表示“ok”

顺序：  在html页面script里写上 输入框失去焦点事件onblur 

用get方式传递请求

AXIOS

Axios 对原生的AJAX进行封装，简化书写

官网：https://www.axios-http.cn

 

 JSON

 

 转成对象后，就可以用jsObject.name等调用JSON里的数据了

在Axios中，我们无需提前进行转换，因为会自动帮我们转换

 

 

 sevlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1.调用service查询
    List brands = brandService.selectAll();
    //2.将集合转换为JSON数据 序列化
    String jsonString = JSON.toJSONString(brands);
    //3.响应数据
    response.setContentType("text/json;charset=utf-8");
    response.getWriter().write(jsonString);
}

html 主要代码

request.getParameter 无法读取JSON数据

所以我们直接获取请求体

servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //获取请求体数据
    BufferedReader br = request.getReader();
    String params =br.readLine();

    //将JSON字符串转换成java对象
    Brand brand = JSON.parseObject(params,Brand.class);

    //调用service添加
    brandService.add(brand);
    //响应成功标识
    response.getWriter().write("success");
}

js: