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

news/2024/7/10 22:48:28 标签: jquery, javascript, 前端, ajax, ecmascript

目录

一、jQuery 方式

1. $.get() 获取数据

 ① $.get() 发起不带参数的请求

 ② $.get() 发起带参数的请求

2. $.post() 提交数据

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

ajax()%20%E6%97%A2%E5%8F%AF%E4%BB%A5%E8%8E%B7%E5%8F%96%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE-toc" style="margin-left:40px;">3. $.ajax() 既可以获取也可以提交数据

ajax()%20%E5%8F%91%E8%B5%B7%20GET%20%E8%AF%B7%E6%B1%82%EF%BC%88%E5%8F%AA%E9%9C%80%E8%A6%81%E5%B0%86%20type%20%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE%E4%B8%BA'%20GET%20'%E5%8D%B3%E5%8F%AF%EF%BC%89%C2%A0-toc" style="margin-left:80px;"> ① 使用 $.ajax() 发起 GET 请求（只需要将 type 属性设置为' GET '即可） 

ajax()%20%E5%8F%91%E8%B5%B7%20POST%20%E8%AF%B7%E6%B1%82%C2%A0-toc" style="margin-left:80px;"> ② 使用 $.ajax() 发起 POST 请求 

二、xhr 方式 

1.  使用 xhr 发起 GET 请求

2. 使用 xhr 发起 POST 请求 

三、axios 方式 

1. 使用 axios 发起 GET 请求

2. 使用 axios 发起 POST 请求 

3.  直接使用 axios 发起请求

 ① 直接使用 axios 发起 GET 请求

 ② 直接使用 axios 发起 POST 请求 

今天分享的内容都是数据交互中的重中之重，满满的干货，一定要仔细看噢~ 

一、jQuery 方式

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

jQuery 中发起 Ajax 请求最常用的三个方法如下：

1. $.get() 获取数据

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

参数名参数类型是否必选说明
urlstring是要请求的资源地址
dataobject否请求资源期间要携带的参数
callbackfunction否请求成功时的回调函数

 ① $.get() 发起不带参数的请求

javascript">$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
         console.log(res) // 这里的 res 是服务器返回的数据
})

 ② $.get() 发起带参数的请求

javascript">$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res){
         console.log(res) 
})

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

2. $.post() 提交数据

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

参数名参数类型是否必选说明
urlstring是提交数据的地址
dataobject否要提交的数据
callbackfunction否数据提交成功时的回调函数

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

javascript">$.post(
    'http://www.liulongbin.top:3006/api/addbook',  //请求的 URL 地址
    { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社'}, //提交的数据
    function(res) {    // 回调函数
      console.log(res)
   }
)

ajax()%20%E6%97%A2%E5%8F%AF%E4%BB%A5%E8%8E%B7%E5%8F%96%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE">3. $.ajax() 既可以获取也可以提交数据

$.ajax({

     type: ' ',  // 请求的方式，例如 GET 或 POST

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

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

      success: function(res) { }  // 请求成功之后的回调函数

}) 

ajax()%20%E5%8F%91%E8%B5%B7%20GET%20%E8%AF%B7%E6%B1%82%EF%BC%88%E5%8F%AA%E9%9C%80%E8%A6%81%E5%B0%86%20type%20%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE%E4%B8%BA'%20GET%20'%E5%8D%B3%E5%8F%AF%EF%BC%89%C2%A0"> ① 使用 $.ajax() 发起 GET 请求（只需要将 type 属性设置为' GET '即可） 

javascript">$.ajax({
  type: 'get',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  data: { id: 1 }
  success: function(res) {
    console.log(res)
}
})

ajax()%20%E5%8F%91%E8%B5%B7%20POST%20%E8%AF%B7%E6%B1%82%C2%A0">② 使用 $.ajax() 发起 POST 请求 

javascript">$.ajax({
  type: 'post',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  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 对象封装出来的 

1.  使用 xhr 发起 GET 请求

 方法如下图所示：

javascript">        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()
        // 2. 调用 open 函数，指定 请求方式 与 URL地址
        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
        // 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:3006/api/getbooks?id=1&bookname=西游记')

多个参数之间用 & 连接

2. 使用 xhr 发起 POST 请求 

 方法如下图所示： 

javascript">        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()
        // 2. 调用 open 函数，指定 请求方式 与 URL地址
        xhr.open('POST','http://www.liulongbin.top:3006/api/addbooks')
        // 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 包

 1. 使用 axios 发起 GET 请求

 语法： 

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

 代码如下：

javascript">        // 请求 URL 地址
        var url = 'http://www.liulongbin.top:3006/api/get'
        // 请求的参数对象
        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);
        })

2. 使用 axios 发起 POST 请求 

语法： 

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

代码如下： 

javascript">         // 请求 URL 地址
        var url = 'http://www.liulongbin.top:3006/api/post'
        // 要提交到服务器的数据
        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 不用

3.  直接使用 axios 发起请求

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

 axios({

      method: '请求类型',

      url: '请求的URL地址'

      data: { /* POST数据 */}，

      params: { /* GET参数 */}

}).then(callback)

 ① 直接使用 axios 发起 GET 请求

javascript">        axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/get',
            params: {  // GET 参数要通过 params 属性提供
                name: 'zs',
                age: 20
            }
        }).then(function(res){
            console.log(res.data);
        })

② 直接使用 axios 发起 POST 请求 

javascript">        axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            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>

这次的分享到这就结束啦~希望可以收到你的小心心~ 


http://www.niftyadmin.cn/n/1866648.html

相关文章

pyqt5 Qt Designer设计好的界面转换成py文件后，把他显示出来

pyqt5 Qt Designer设计好的界面转换成py文件后，把他显示出来

文件末尾添加如下代码if __name__ "__main__":import sysapp QtWidgets.QApplication(sys.argv)widget QtWidgets.QWidget()new Ui_Form()new.setupUi(widget)widget.show()sys.exit(app.exec())
阅读更多...
two sum python_[LeetCode-1-Easy] Two Sum

two sum python_[LeetCode-1-Easy] Two Sum

题目要求Given an array of integers, return indices of the two numbers such that they add up to a specific target.You may assume that each input would have exactly one solution, and you may not use the same element twice.给定一个整数数组 nums和一个目标值 ta…
阅读更多...
QtWidgets 中 QWidget,QMainWindow,QDialog的简单区别

QtWidgets 中 QWidget,QMainWindow,QDialog的简单区别

QWidget窗口带有最小化最大化退出 QMainWindow窗口也带有最大化最小化和退出&#xff0c;另外窗口最下面有statusbar可以显示设置的消息 QDialog窗口没有最大化和最小化&#xff0c;只有退出&#xff0c;可用于修改信息的跳转窗口
阅读更多...
太湖之光超级计算机应用最高奖,国家超级计算无锡中心发布：“神威·太湖之光”最新应用成果...

太湖之光超级计算机应用最高奖,国家超级计算无锡中心发布：“神威·太湖之光”最新应用成果...

原标题&#xff1a;国家超级计算无锡中心发布&#xff1a;“神威太湖之光”最新应用成果清华大学教授、国家超级计算无锡中心主任杨广文人民网乌镇12月3日电(记者 燕帅 宋心蕊)第四届世界互联网大会今天正式开幕。今天下午&#xff0c;“世界互联网领先科技成果发布活动”在乌镇…
阅读更多...
淘宝搜索案例的实现

淘宝搜索案例的实现

这个案例是我一开始接触前端就好奇的&#xff0c;现在终于知道是怎么做出来的了&#xff01; 迫不及待想分享给大家&#xff01; 实现步骤&#xff1a; 1. 获取用户输入的搜索关键词&#xff1a;为了获取到用户每次按下键盘输入的内容&#xff0c;需要监听输入 框的 key…
阅读更多...
180331 如何修改pdf背景颜色

180331 如何修改pdf背景颜色

1 用Adobe Acrobat 打开文件2 点击工具-背景3 从颜色&#xff1a;设置需要的背景颜色4 位置&#xff1a;指定更改颜色的范围&#xff08;可参考如何所示&#xff09;
阅读更多...
快速上手用JS实现元素的拖动与占位

快速上手用JS实现元素的拖动与占位

这篇博客&#xff0c;是博主这几天刚做的一个项目遇到的一个难点&#xff0c;学会了这个&#xff0c;你就能轻松实现页面元素的移动啦&#xff0c;再配合一些条件&#xff0c;就可以做出一个任务完成进度的页面了&#xff01; 先来看看效果&#xff1a; 实现功能&#xff1a; …
阅读更多...
html如何设置图片出现箭头,使用CSS3伪元素实现的图片箭头

html如何设置图片出现箭头,使用CSS3伪元素实现的图片箭头

CSS语言&#xff1a;CSSSCSS确定* {-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;/* Firefox, other Gecko */box-sizing: border-box;/* Opera/IE 8 */}html {min-height: 100%;}body {background: url("/uploads/1602…
阅读更多...
最新文章

Copyright @ 2022~2023