用三种不同方式获取 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>

用三种不同方式获取 GET 和 POST 请求

江湖大侠

引用和评论

关于在hive任务中number of reducers的探讨

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号