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方式传递请求

<script>
    //给用户名输入框绑定焦点失去事件
    document.getElementById("username").οnblur=function (){
        //获取用户名的值
        const username = this.value;

        //创建核心对象
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP")
        }
        //发送请求
        xhttp.open("GET","http://localhost:8080/maven3/selectUserServlet?username="+username);
        xhttp.send();

        //获取响应
        xhttp.onreadystatechange=function (){
            if(this.readyState == 4 && this.status==200){

                //判断传入的响应  true则为用户名已存在
                if(this.responseText=="true"){
                    document.getElementById("username_err").style.display='';

                }else {
                    document.getElementById("username_err").style.display='none';
                }
            }
        }

    }
</script>

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<Brand> brands = brandService.selectAll();
    //2.将集合转换为JSON数据 序列化
    String jsonString = JSON.toJSONString(brands);
    //3.响应数据
    response.setContentType("text/json;charset=utf-8");
    response.getWriter().write(jsonString);
}

html 主要代码

<script>
    //当页面加载完成后，发送ajax请求
    window.οnlοad=function (){
        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+=" <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>"

            }
            //设置表格数据
            document.getElementById("brandTable").innerHTML=tableData;


        })
    }
</script>

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:

<script>
    document.getElementById("btn").οnclick=function (){
        //将表单数据转为JSON
        const formData = {
            brandName: "",
            companyName: "",
            ordered: "",
            description: "",
            status: "",
        };
        //获取表单数据并设置数据
        formData.brandName=document.getElementById("brandName").value;
        formData.companyName=document.getElementById("companyName").value;
        formData.ordered=document.getElementById("ordered").value;
        formData.description=document.getElementById("description").value;
      //我们不知道哪个选中了，就获取所有的radio，然后遍历，哪个是checked的就赋值哪个
        const status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                formData.status=status[i].value;
            }
        }
        //发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function (resp){
            //判断响应数据是否为success
            if (resp.data==="success"){
                location.href="http://localhost:8080/brand-demo/brand.html";
            }
        })
    }
</script>