正文

教你用三种不同方式获取get和post请求(代码片段)

啵啵丶  啵啵丶  2023-01-31  422

关键词：

3. $.ajax() 既可以获取也可以提交数据

① 使用 $.ajax() 发起 GET 请求（只需要将 type 属性设置为' GET '即可）

② 使用 $.ajax() 发起 POST 请求

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])

参数名参数类型是否必选说明
url string 是要请求的资源地址
data object 否请求资源期间要携带的参数
callback function 否请求成功时的回调函数

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

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

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

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

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

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

2. $.post() 提交数据

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

参数名参数类型是否必选说明
url string 是提交数据的地址
data object 否要提交的数据
callback function 否数据提交成功时的回调函数

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

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

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

3. $.ajax() 既可以获取也可以提交数据

$.ajax(

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

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

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

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

)

① 使用 $.ajax() 发起 GET 请求（只需要将 type 属性设置为' GET '即可）

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

)

② 使用 $.ajax() 发起 POST 请求

$.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 请求

方法如下图所示：

        // 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 请求

方法如下图所示：

        // 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)

代码如下：

        // 请求 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)

代码如下：

         // 请求 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 请求

        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 请求

        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>

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

三种post和get的提交方式

...体。两种都是较为重要的数据提交方式。现简单介绍一下三种post和get的提交方式。无论是哪种方法实现post和get，get的访问路径都要携带数据，而post提交是把数据放在方法体中。查看详情

js里常见的三种请求方式$.ajax$.post$.get分析

$.post和$.get是$.ajax的一种特殊情况：$.post和$.get请求都是异步请求，回调函数里写return来返回值是无意义的，回调函数里对外部变量进行赋值也是无意义的。即使是$.ajax里的同步请求，return的值并不能直接返回，这里涉及到跨域... 查看详情

jquery中$.get()提交和$.post()提交有区别吗？

...请求的方式来获取服务端的数据；异同点：a、请求方式不同：$.get()方法使用GET方法来进行异步请求的。$.post()方法使用POST方法来进行异步请求的。b、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HT... 查看详情

表单的提交有两种方式：get和post，这两种方式的区别是啥？

如题一、指代不同1、GET：从指定的资源请求数据。2、POST：向指定的资源提交要被处理的数据二、规则不同1、GET：请求可被缓存；请求保留在浏览器历史记录中；请求可被收藏为书签；请求不应在处理敏感数据时使用；请求有... 查看详情

post请求和get请求区别及其实例(代码片段)

...交方式，默认为GET提交方式。HTTP定义了与服务器交互的不同方法，其中最基本的有四种：GET，POST，PUT，DELETE，HEAD。2.GET请求实例：GEThttp://weibo.com/signup/signup.php?inviteCode=238849 查看详情

表单提交中get和post方式的区别

一、指代不同1、get：从指定的资源请求数据。2、post：向指定的资源提交要被处理的数据。二、安全性不同1、get：GET的安全性较差，因为所发送的数据是URL的一部分。2、post：POST比GET更安全，因为参数不会被保存在浏览器历史... 查看详情

三种post提交数据方式(代码片段)

0x00背景POST是在平日中很常见一种请求方式。相比于GET请求方式来说，POST更加的安全（不会被保存在浏览器历史或WEB服务器日志中）也支持更大的数据传输（GET请求因为是在URL添加参数所以受到URL长度的限制，即只支持2048个字... 查看详情

详解asp.netcoreapi的get和post请求使用方式(代码片段)

...览器/服务器的限制，导致他们在应用过程中体现出一些不同。get产生一个tcp数据包；post产生两个tcp数据包。对于get方式的请求，浏览器会把httpheader和data一并发送出去，服务器响应200（返回数据）；而对于post，浏览器先发送hea 查看详情

http请求-get和post的区别

...中传送的参数是有长度限制的（每个浏览器限制的长度都不同），而POST没有。对参数的数据类型，GET只接受ASCII字符，而POST没有限制。GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。GET请求只能进行u... 查看详情

post和get传值的区别

页面传值一、特性不同：Get请求是将数据添加到URL中并传递到服务器，通常利用一个问号“？”代表URL地址的结尾与数据参数的开端。Post请求数据是放在HTTP主体中的，其组织方式不只一种，有"&"连接方式，也有分割... 查看详情

springmvc之post和get获取参数总结(代码片段)

SpringMVC之GET请求参数获取方式方式一：直接在方法体中指定参数eg:@GetMapping("/get")publicUsergetUserById(Integerid)if(id.intValue()==0)returnnull;returnlist.get(id);HTTP请求路径= http://ip:port/ 查看详情

get请求，post请求乱码问题解决方案(代码片段)

之所以出现乱码，主要是由于编码和解码采用的方法不同。因此保证编码解码格式一致是避免乱码发生的重要前提。问题背景：JavaWeb技术下，Tomcat作为容器，发送请求的时候出现乱码问题。下面以两种常见的请求... 查看详情

表单提交中get和post方式的区别

参考技术A一、回退处理不同1、get：在浏览器回退时不进行其它操作。2、post：在浏览器回退时POST会再次提交请求。二、地址处理不同1、get：产生的URL地址可以被Bookmark。2、post：产生的URL地址不可以被Bookmark。三、参数处理不同... 查看详情

restful和xml(代码片段)

...id=1//删除用户信息说明：传统的方法语义不明而且混乱，不同的人设计的地址也不一样，没有统一规范一套关于设计请求的规范为了操作语义更加明确，使用不同的请求方式操作代表不同的操作GET：获取数据POST：添加数据PUT：... 查看详情

对于网页中的form元素，method属性的get和post有何不同？

get和post是http请求的两种方式；一般来说，get方式应用于获取数据（查询），而不对数据本身做更改，post方式应用于修改数据（增删改）。get和post表现形式上的差别简单列举如下，浏览器缓存：浏览器可能会缓存get请求结果，... 查看详情

asp.net页面的提交方式post和get有啥区别？

...签，提交方式就是post。但这些都是自动生成的代码如果你用的是mvc方式，就会显式的体现post方式；当然普通的web开发，（也可以像asp那样可以自己定义form表单提交)，到另外一个aspx页面，然后request....form什么的，就可以获取（... 查看详情

http中get和post请求方式的区别

1，在form表单中，如果没有指定请求方式，默认是get请求； 2，get请求是从服务器获取数据，而post是往服务器发送数据； 3，get请求的URL中，get请求的数据会附加在URL之后，以？分隔；post请求的数据封装到http包中； 4... 查看详情

post与get(代码片段)

...何通信的协议。4GET和POST本质上就是TCP链接，并无差别。不同点：1.GET在浏览器回退时是无害的，而POST会再次提交请求。2.GET请求会被浏览器主动cache，而POST不会，除非手动设置。3.GET请求只能进行url编码，而POST支持多种编码方... 查看详情