标签：02 console 请求 09 ajax 2022 post data log

学习心得

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。