关于前端:用三种不同方式获取-GET-和-POST-请求

一、jQuery 形式

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相干的函数，极大地升高了Ajax的应用难度。

jQuery 中发动 Ajax 申请最罕用的三个办法如下：

$.get() 获取数据

$.get(url,[data],[callback])

参数名参数类型是否必选阐明

url string 是要申请的资源地址

data object 否申请资源期间要携带的参数

callback function 否申请胜利时的回调函数

① $.get() 发动不带参数的申请

$.get('http://www.atguigu.com:3006/a...',function(res){

console.log(res) // 这里的 res 是服务器返回的数据

})

② $.get() 发动带参数的申请

$.get('http://www.atguigu.com:3006/a...', { id: 1 }, function(res){

console.log(res)

})

切记！！！其中参数是以对象的模式

$.post() 提交数据

$.post(url,[data],[callback])

参数名参数类型是否必选阐明

url string 是提交数据的地址

data object 否要提交的数据

callback function 否数据提交胜利时的回调函数

$.post() 向服务器提交数据

$.post(

'http://www.www.atguigu.com:30...', //申请的 URL 地址

{ bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社'}, //提交的数据

function(res) { // 回调函数

console.log(res)

}

)

$.ajax() 既能够获取也能够提交数据

$.ajax({

type: ' ', // 申请的形式，例如 GET 或 POST

url: ' ', // 申请的 URL 地址

data: { }, // 这次申请要携带的数据

success: function(res) { } // 申请胜利之后的回调函数

})

① 应用 $.ajax() 发动 GET 申请（只须要将 type 属性设置为' GET '即可）

$.ajax({

type: 'get',

url: 'http://www.www.atguigu.com:30...',

data: { id: 1 }

success: function(res) {

console.log(res)

}

})

② 应用 $.ajax() 发动 POST 申请

$.ajax({

type: 'post',

url: 'http://www.atguigu.com:3006/a...',

data: {

bookname: '水浒传',

author: '施耐庵',

publisher: '上海图书出版社'

success: function(res) {

console.log(res)

}

})

既然理解了概念，那咱们就实操一下，上面看个例题：实现图书列表的增删显示性能

实现代码如下：

<!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>Document</title><link rel="stylesheet" href="bootstrap.css"><script src="jQuery.min.js"></script>

</head>
<body style="padding: 15px">

<div class="panel panel-primary">      <div class="panel-heading">            <h3 class="panel-title">增加新图书</h3>      </div>      <div class="panel-body form-inline">                                    <div class="input-group">                <div class="input-group-addon">书名</div>                <input type="text" class="form-control" id="iptBookname" placeholder="请输出书名">            </div>            <div class="input-group">                <div class="input-group-addon">作者</div>                <input type="text" class="form-control" id="iptAuthor" placeholder="请输出作者">            </div>            <div class="input-group">                <div class="input-group-addon">出版社</div>                <input type="text" class="form-control" id="iptPublisher" placeholder="请输出出版社">            </div>                        <button id="btn" class="btn btn-primary">增加</button>      </div></div><table class="table table-bordered table-hover">    <thead>        <tr>            <th>Id</th>            <th>书名</th>            <th>作者</th>            <th>出版社</th>            <th>操作</th>        </tr>    </thead>    <tbody id="tb">           </tbody></table><script>    $(function(){        //获取图书列表数据        function getBookList(){            $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){                if(res.status !== 200) return alert('获取数据失败！');                // 把获取到的数据都寄存在数组中                var rows = []                $.each(res.data, function(i,item){                    rows.push('<tr><td>'+item.id+'</td><td>'+item.bookname+'</td><td>'+item.author+'</td><td>'+item.publisher+'</td><td><a href:"javascript:;" class="del" data-id="'+item.id+'">删除</a></td></tr>')                })                // 将数组转化为字符串渲染到页面                $('#tb').empty().append(rows.join(''))                            })        }        getBookList()        //删除图书        $('tbody').on('click','.del',function(){            var id = $(this).attr('data-id')            $.get('http://www.liulongbin.top:3006/api/delbook',{id: id},function(res){                if(res.status !== 200) return alert('删除图书失败！')                // 调用该函数，把页面从新渲染一遍                getBookList()            })        })        $('#btn').on('click',function(){            // trim() 函数能够去除字符串两端的空格            var bookname = $('#iptBookname').val().trim()            var author = $('#iptAuthor').val().trim()            var publisher = $('#iptPublisher').val().trim()            if(bookname.length <= 0 || author.length <=0 || publisher.length <=0) {                return alert('请填写残缺的图书信息！')            }            // 增加图书            $.post('http://www.liulongbin.top:3006/api/addbook',{bookname: bookname, author: author,publisher: publisher},function(res){                if(res.status !== 201) return alert('增加图书失败！')                getBookList()                // 清空输入框内容                $('#iptBookname').val('')                $('#iptAuthor').val('')                $('#iptPublisher').val('')            })        })    })</script>

</body>
</html>

二、xhr 形式

XMLHttpRequest(简称 xhr) 是浏览器提供的 Javascript 对象，通过它，能够申请服务器上的数据资源。之前所学前端培训技术的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装进去的

应用 xhr 发动 GET 申请

办法如下图所示：

// 1. 创立 xhr 对象

var xhr = new XMLHttpRequest()

// 2. 调用 open 函数，指定申请形式与 URL地址

xhr.open('GET','http://www.atguigu.com:3006/a...')

// 3. 调用 send 函数，发动 Ajax 申请

xhr.send()

// 4. 监听 onreadystatechange 事件

xhr.onreadystatechange = function() {

// 4.1 监听 xhr 对象的申请状态 readyState; 与服务器响应的状态 status

if(xhr.readyState === 4 && xhr.status === 200) {

// 4.2 打印服务器响应回来的数据

console.log(xhr.responseText);

}

如果发动的是带参数的 GET 申请，只须要在调用 xhr.open 期间，为 URL 地址指定参数即可：

xhr.open('GET','http://www.liulongbin.top:300...西游记')

多个参数之间用 & 连贯

应用 xhr 发动 POST 申请

办法如下图所示：

// 1. 创立 xhr 对象

var xhr = new XMLHttpRequest()

// 2. 调用 open 函数，指定申请形式与 URL地址

xhr.open('POST','http://www.liulongbin.top:300...')

// 3. 设置 Content-Type 属性（固定写法）

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

// 4. 调用 send 函数，同时将数据以查问字符串的模式，提交给服务器

xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

// 5. 监听 onreadystatechange 事件

xhr.onreadystatechange = function() {

// 4.1 监听 xhr 对象的申请状态 readyState; 与服务器响应的状态 status

if(xhr.readyState === 4 && xhr.status === 200) {

// 4.2 打印服务器响应回来的数据

console.log(xhr.responseText);

}

以 xhr 形式发动 PSOT 和 GET 申请的区别：

① 传递数据参数的地位不同：GET 形式是写在 URL 地址的前面，而 POST 形式是写在xhr.send() 中

② 发动 POST 申请时，必须写 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') ，GET 申请不须要写

三、axios 形式

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

应用前要先导入 axios.js 包

应用 axios 发动 GET 申请

语法：

axios.get('url', { params: { /参数/} }).then(callback)

代码如下：

// 申请 URL 地址

var url = 'http://www.liulongbin.top:300...'

// 申请的参数对象

var paramsObj = { name: 'zs', age: 20 }

// 调用 axios.get() 发动 GET 申请

axios.get(url, { params: paramsObj }).then(function(res){

// res.data 是服务器返回的数据

var result = res.data

console.log(res);

})

应用 axios 发动 POST 申请

语法：

axios.post('url', { /参数/} ).then(callback)

代码如下：

// 申请 URL 地址

var url = 'http://www.liulongbin.top:300...'

// 要提交到服务器的数据

var dataObj = { location: '北京', address: '顺义' }

// 调用 axios.post() 发动 POST 申请

axios.post(url, dataObj).then(function(res){

// res.data 是服务器返回的数据

var result = res.data

console.log(res);

})

axios 发动 GET 和 POST 语法的区别：

GET 申请时，参数要通过 params 属性提供，而 POST 不必

间接应用 axios 发动申请

axios 也提供了相似于 jQuery 中 $.ajax() 的函数，语法如下：

axios({

method: '申请类型',

url: '申请的URL地址'

data: { / POST数据 /}，

params: { / GET参数 /}

}).then(callback)

① 间接应用 axios 发动 GET 申请

axios({

method: 'GET',

url: 'http://www.liulongbin.top:300...',

params: { // GET 参数要通过 params 属性提供

name: 'zs',

age: 20

}

}).then(function(res){

console.log(res.data);

})

② 间接应用 axios 发动 POST 申请

axios({

method: 'POST',

url: 'http://www.liulongbin.top:300...',

data: { // POST 参数要通过 data 属性提供

bookname: '程序员的自我涵养',

price: 666

}

}).then(function(res){

console.log(res.data);

})

案例实际：应用 axios 发动 GET 和 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>Document</title><script src="./axios.js"></script><style>    body {        padding-left: 50px;    }    .container {        width: 300px;        height: 150px;        box-shadow: 0 0 5px rgba(0,0,0,0.8);        background-color: #c7c7c7;        margin-bottom: 20px;    }</style>

</head>
<body>

<div class="container"></div><button id="btn1">get更换</button><button id="btn2">post更换</button><script>    document.querySelector('#btn1').addEventListener('click',function(){       var url = 'https://xl.xilinglaoshi.com:8001/fenshou'              axios({           method: 'GET',           url: url,       }).then(function(res){           // 获取到须要的数据并渲染到页面           document.querySelector('.container').innerHTML = res.data.data[0].content;       })    })    document.querySelector('#btn2').addEventListener('click',function(){        var url = 'https://xl.xilinglaoshi.com:8001/qingshi'        axios({            method:'POST',            url: url,        }).then(function(res){            document.querySelector('.container').innerHTML = res.data.data[0].content;        })    })    </script>

</body>
</html>