2022-09-01 第四小组 王星苹 学习笔记

学习心得

axios对原生ajax的一个封装。

学习总结

  ES6语法。Promise语法。

 

* axios发送get请求，
*   请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任何区别。
* axios发送post请求，
*   请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。

<script>
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{
            post(){
                // 发送post请求
                axios.post("vue.do",{
                    "username":"xiaoqiang",
                    "password":"000000"
                },function(response){
                    console.log(response);
                });
            },
            get(){
                // 发送get请求
                axios.get("vue.do?username=admin&password=666666").then(function(response){
                    console.log(response);
                    console.log(response.data);
                }).catch(function(err){
                    console.log(err);
                });
            }
        },
    });

 

4种发请求的方式：
1、地址栏
2、a标签
3、form表单
4、location.href或window.open()

ajax：异步刷新（局部刷新），前端技术。给后台发请求。
异步：整个页面不会全部刷新，只有某个局部在刷新。
    验证用户名是否存在。
刷新：


注意点1：
使用ajax发送请求，页面是不可以通过后台跳转！！！
如果需要跳页面，也是通过我们前端的JS来跳转，不可能通过servlet跳转

注意点2：
ajax和form表单不能同时使用。
ajax：不跳页面。
form：一定跳走的。

请求体：post请求才有请求体。
ajax发起请求，后台给出的响应会回到ajax的响应处理函数中。
readyState：
0：      xhr被创建成功，open方法未调用
1：      open被调用，建立的连接
2：      send被调用，可以获取状态行和响应头
3：      可以拿到响应体，响应体加载中
4：      响应体下载完成，可以直接使用responseText。
         代表请求可以正常发送，响应能

// formData构建一个表单数据对象
// formData是JS的内置对象，和JQuery无关，和Vue无关

3.完整写法
$.ajax({
    url: "valid.do",
    type: "post",
    data: formData,
    success : function(res) {
        console.log(res);
    },
    error : function(res) {
        console.log(res);
    }
});


2.发送post请求
$.post("valid.do","username=" + username,function (data) {
    if(data == "1") {
        $("#msg").html("用户名可用...")
    }
    if(data == "0") {
        $("#msg").html("用户名已存在...")
    }
});

1.发送get请求
$.get("valid.do?username=" + username,function(data) {
    // data就是后台回来的响应体
    console.log(data);
    if(data == "1") {
        $("#msg").html("用户名可用...")
    }
    if(data == "0") {
        $("#msg").html("用户名已存在...")
    }
}