其他分享
首页 > 其他分享> > 2022-09-02 第四小组 王星苹 学习笔记

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

作者:互联网

学习心得

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("用户名已存在...")
    }
}
 

 

标签:02,console,请求,09,ajax,2022,post,data,log
来源: https://www.cnblogs.com/wxp0909/p/16650955.html