JavaScript 前后端交互XMLHttpRequest对象、ajax、axios

最新推荐文章于 2022-04-19 22:10:04 发布

CookChopper

最新推荐文章于 2022-04-19 22:10:04 发布

阅读量340

点赞数

分类专栏：努力学前端文章标签： ajax javascript jquery xmlhttprequest

本文链接：https://blog.csdn.net/hjc13348/article/details/116400032

版权

努力学前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

前后端交互Ajax

前后端交互 jQuery
数据交互
- JSON.parse()和JSON.stringify()
XMLHttpRequest对象
XMLHttpRequest level2新特性
axios

前后端交互 jQuery

$.get请求方法

常用于查询数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get请求</title>
    <script src="../js/jquery.js"></script>
</head>
<body>
    <button>get请求</button>
    <script>
        $(function(){
            //带参数get请求
            /*
            $('button').on('click',function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',{id:2},function(res){
                    console.log(res.data);
                });
            });
            */
           //不带参数get请求
           $('button').on('click',function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                    console.log(res.data);
                });
           });
        });
    </script>
</body>
</html>

$.post请求方法

一般用于提交数据，表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post请求</title>
    <script src="../js/jquery.js"></script>
</head>
<body>
    <button id='addbook'>post请求</button>
    <button id='select'>查询</button>
    <input type="text"><button id='del'>删除指定id数据</button>
    <script>
        $(function(){
            //添加图书
            $('#addbook').on('click',function(){
                $.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'史记1',author:'司马迁1',publisher:'司马迁出版社1'},function(res){
                    console.log(res);
                });
            });
            //查询图书
            $('#select').on('click',function(){
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                    console.log(res.data);
                })
            })
            //删除图书
            $('#del').on('click',function(){
                $.get('http://www.liulongbin.top:3006/api/delbook',{id:$('input').val()},function(res){
                    console.log(res);
                })
            })
        });
    </script>
</body>
</html>

$.ajax请求方法

语法规范

$.ajax({
    type : "get",   //请求方式
    url : "http://www.liulongbin.top:3006/api/getBooks",    //请求地址
    data : {        //请求参数
        id:1
    },
    success : function(res){    //成功回调函数
        console.log(res.data);
    }
});

form表单

form常用属性

属性名	参数	说明
method	get或者post	规定用于发送 form-data 的 HTTP 方法
action	url(api接口地址)	规定当提交表单时向何处发送表单数据
target	_blank (新窗口打开)_self(本窗口打开)	规定在何处打开 action URL
enctype	application/x-www-form-urlencoded	在发送前编码所有字符（默认）
enctype	multipart/form-data	不对字符编码，在使用包含文件上传控件的表单时必须使用该值

监听表单提交事件

<form action="/login" id="f1">
   <input type="text" name="user_name" />
   <input type="password" name="password" />
   <button type="submit">提交</button>
</form>
<script>
    $(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('监听到了表单的提交事件')
      // })

      // 第二种方式
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
      })
    })
</script>

阻止表单的默认行为

<script>
    $(function () {
      $('#f1').on('submit', function (e) {  
        e.preventDefault();//阻止表单的默认行为
      })
    })
</script>

art-template模板引擎

官网地址：http://aui.github.io/art-template/zh-cn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>art-templete</title>
    <!-- 1.引入art-templete js文件 -->
    <script src="../js/template.js"></script>
    <script src="../js/jquery.js"></script>
</head>
<body>
    <!-- 创建容器 -->
    <div class="container">

    </div>
    <!-- 3.创建一个页面模板 -->
    <script type="text/html" id="Page">
        <!-- 标准语法 -->
        <h1>{{name}}</h1> 
        <!-- 原样输出 -->
        {{@text}}
        <!-- if判断语句 -->
        {{if flag === 0}}
        <div>我是{{flag}} -0</div>
        {{else if flag === 1}}
        <div>我是{{flag}} -1</div>
        {{/if}}
        <!-- 循环语句 $index是当前循环的索引，$value是当前循环的值-->
        {{each hobby}}
        <div>索引是{{$index}},值是{{$value}}</div>
        {{/each}}
        <!-- 循环语句 索引，值可以用别名-->
        {{each hobby $val $i}}
        <div>索引是{{$i}},值是{{$val}}</div>
        {{/each}}
        <!-- 过滤器 | 管道操作符 -->
        <div>时间是{{time | dataFormt}}</div>
    </script>
    <!-- 2. 使用art-template -->
    <script>
        // 2.2定义过滤器
        template.defaults.imports.dataFormt = function(data){
            var y = data.getFullYear();
            var m = data.getMonth();
            var d = data.getDate();
            var hours = data.getHours();
            var min = data.getMinutes();
            var second = data.getSeconds();
            return y + '-' + m + '-' + d + "  " +hours + ':' + min + ":" + second; 
        }
        // 2.1定义渲染数据
        var data = {
            name : "zhangsan",
            age : 18,
            text : "<h3>我是原样输出</h3>",
            flag : 1,
            hobby:["吃饭","睡觉","打游戏"],
            time : new Date(),
        };
        // 2.3调用页面模板
        var htmlstr = template('Page',data);

        // 2.4渲染数据
        $('.container').html(htmlstr);
    </script>
</body>
</html>

自制简易模板引擎

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易模板引擎</title>
    <!-- 1.引入自制模板引擎 -->
    <script src="js/template.js"></script>
</head>
    <div id="container">

    </div>
<!-- 
	//exec()方法 
    <script>
        var str = "<div>我是{{name}}</div>";
        var parrent = /{{([a-zA-Z]+)}}/;
        console.log(parrent.exec(str));
        var str = str.replace(parrent.exec(str)[0],parrent.exec(str)[1]);
        console.log(str);	//输出为["{{name}}", "name", index: 9, input: "<div>我是{{name}}</div>", groups: undefined]
    </script>
 -->
     <!-- 3.编译页面模板 -->
    <script type="text/html" id="tmp">
        <div>{{name}}</div>
        <div>{{age}}</div>
        <div>{{scale}}</div>
    </script>

    <script>
    	//2.编写数据
        var data = {name:'zs',age:18,scale:100}
        //4.调用模板引擎
        var htmlstr = template('tmp',data);
        //5.渲染页面
        document.getElementById('container').innerHTML = htmlstr;
    </script>
</body>
</html>

template文件

function template(id,data){
	//id为页面模板id data为数据
    var str = document.getElementById(id).innerHTML;
    //正则表达式
    var parrent = /{{([a-zA-Z]+)}}/;
    var parrentResult = null;
    //当 parrent.exec(str) 不为null 就循环
    while(parrentResult = parrent.exec(str)){
        str = str.replace(parrentResult[0],data[parrentResult[1]]);
    }
    return str;
}

数据交互

数据交互一般有两种格式，一种是xml格式，一种是json格式，前端用的比较多的是json格式

JSON.parse()和JSON.stringify()

 <script>
        var obj = {name:'zs',age:18};
        var str = '{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"}]}';
        //反序列化 将json字符串转化js对象
        str = JSON.parse(str);
        console.log(str);
        //序列化 将js对象/数组 转化为 json字符串
        var res = JSON.stringify(obj);
        console.log(res);
    </script>

XMLHttpRequest对象

GET请求

 <script>
        // 1.创建xhr对象
        var xhr = new XMLHttpRequest();
        // 2.调用open函数
        xhr.open('GET',"http://www.liulongbin.top:3006/api/getbooks");
        // 3.调用send函数
        xhr.send();
        // 4.监听onreadystatechange
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status ===200){
                console.log(xhr.responseText);
            }
        }
    </script>

POST请求

    <script>
        // 1.创建xhr对象
        var xhr = new XMLHttpRequest();
        // 2.调用open函数
        xhr.open('POST',"http://www.liulongbin.top:3006/api/addbook");
        // 3.设置Content-Type
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // 4.调用send函数
        xhr.send("bookname=111&author=222&publisher=333");
        // 5.监听onreadystatechange
        xhr.onreadystatechange = function(){
            if(xhr.readyState ===4 && xhr.status === 200){
                console.log(xhr.responseText);
            }
        }
    </script>

封装ajax函数

js文件

//将对象转化为 id=1&name=2 格式
function customData(data){
    var arr = [];
    for (let key in data){
        var str = key + "=" + data[key];
        arr.push(str);
    }
    return arr.join("&");
}
//myajax函数
function myajax(options){
    var xhr = new XMLHttpRequest();
    var qs = customData(options.data);
    if(options.method.toUpperCase() === "GET"){
        xhr.open(options.method,options.url + "?" + qs);
        xhr.send();
    }else if(options.method.toUpperCase() === "POST"){
        xhr.open(options.method,options.url);
        xhr.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");
        xhr.send(qs);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            options.success(JSON.parse(xhr.responseText));
        }
    }
}

调用myajax函数

    <script>
        myajax({
            method : "get",
            url : "http://www.liulongbin.top:3006/api/getbooks",
            success : function(res){
                console.log(res);
            }
        });
    </script>

XMLHttpRequest level2新特性

http请求时限

xhr.timeout = 3000; //单位是毫秒
xhr.ontimeout = function(){ console.log(“error”)}; //响应时间超时执行处理函数

    <script>
        //创建xhr对象
        var xhr = new XMLHttpRequest();
        //请求时限 单位毫秒
        xhr.timeout = 300;
        //超时监听 但响应时间超过请求时限，执行这个ontimeout的处理函数
        xhr.ontimeout = function(){
            console.log("请求超时");
        }
        //调用open函数
        xhr.open('GET',"http://www.liulongbin.top:3006/api/getbooks");
        //调用post函数
        xhr.send();
        //监听onreadystatechange
        xhr.onreadystatechange = function(){
            if(xhr.readyState ===4 && xhr.status === 200){
                console.log(xhr.responseText);
            }
        }
    </script>

formData()

new FormData([参数]); // 可填参数，参数为表单form元素

    <form id="form1">
        <input type="text" name="bookname" value="111">
        <input type="text" name="author" value="222">
        <input type="text" name="publisher" value="333">
    </form>
    <script>
    // DOM操作 获取表单元素
    var form1 = document.querySelector("#form1");
    var data = new FormData(form1);
    // 通过append添加数据
    data.append('username','hjc');
    var xhr = new XMLHttpRequest();
    xhr.open("POST","http://www.liulongbin.top:3006/api/formdata");
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState===4&&xhr.status===200){
            console.log(xhr.responseText);
        }
    }
    </script>

文件上传

原生javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <input type="file" id="file1">
    <button id="btnUpload">上传文件</button>
    <br>
    <img src="" alt="" style="width: 800px;" id="img">
    <script>
        
        document.querySelector("#btnUpload").addEventListener('click',function(){
            //获取上传文件
            var file1 = document.querySelector("#file1").files;
            //判断是否选择上传文件
            if(file1.length <= 0){
                return alert('请选择上传文件');
            }
            //创建formdata对象
            var fd = new FormData();
            //追加formdata数据
            fd.append('avatar',file1[0]);
            //创建xhr对象
            var xhr = new XMLHttpRequest();
            //监听文件上传进度
            xhr.upload.onprogress = function(e){
            	//当e.lengthComputable是true的话，表示上传的资源具有可计算的上传长度
                if(e.lengthComputable){
                	//e.loaded 是当前的长度 e.total 是总长度
                    var jindu = e.loaded / e.total * 100;
                    console.log(jindu);
                }
            }
            //调用open函数
            xhr.open("POST","http://www.liulongbin.top:3006/api/upload/avatar");
            //调用send函数
            xhr.send(fd);
            //监听xhr响应
            xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                var data = JSON.parse(xhr.responseText);
                if(data.status==200){
                    //上传成功
                    document.querySelector('#img').src = "http://www.liulongbin.top:3006" + data.url;
                }else{
                    //上传失败
                    console.log(data.message);
                }
            }
            
        }
        });
    </script>
</body>
</html>

jquery高级用法

Ajax 请求开始时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果，示例代码如下

$(document).ajaxStart(function() {
     $('#loading').show()
 })
// $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求

Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果，示例代码如下

$(document).ajaxStop(function() {
     $('#loading').hide()
 })

axios

Axios 是专注于网络数据请求的库
相比于原生的 XMLHttpRequest 对象，axios 简单易用
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios基本使用</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <button id="get">axios的get请求</button>
    <button id="post">axios的post请求</button>
    <button id="axiosget">axios函数get请求</button>
    <button id="axiospost">axios函数post请求</button>
    <script>
        document.querySelector('#get').addEventListener('click',function(){
            var data = { id:1}
            axios.get("http://www.liulongbin.top:3006/api/getbooks",{params:data}).then(function(res){
                //res.data才是服务器返回的数据
                console.log(res.data);
            });
        });
        document.querySelector('#post').addEventListener('click',function(){
            var data = { bookname:"111",author:"222",publisher:"333"};
            axios.post("http://www.liulongbin.top:3006/api/addbook",data).then(function(res){
                //res.data才是服务器返回的数据
                console.log(res.data);
            });
        });
        document.querySelector('#axiosget').addEventListener('click',function(){
            var data = {id:3}
            axios({
                method:"GET",
                url:"http://www.liulongbin.top:3006/api/getbooks",
                //get请求传递参数 params
                params:data,
                
            }).then(function(res){
                console.log(res.data);
            });
        })
        document.querySelector('#axiospost').addEventListener('click',function(){
            var data = {bookname:"aaa",author:"bbb",publisher:"ccc"}
            axios({
                method:"POST",
                url:"http://www.liulongbin.top:3006/api/addbook",
                //post请求传递参数 data
                data:data,
                
            }).then(function(res){
                //res.data才是服务器返回的数据
                console.log(res.data);
            });
        })
    </script>
</body>
</html>

CookChopper

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 前后端交互XMLHttpRequest对象、ajax、axios

前后端交互Ajax前后端交互$.get请求方法$.post请求方法$.ajax请求方法前后端交互$.get请求方法常用于查询数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫