Ajax中get和post的请求形式

最新推荐文章于 2024-03-13 16:27:17 发布

南风花海

最新推荐文章于 2024-03-13 16:27:17 发布

阅读量199

点赞数 1

分类专栏： javascript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/nanfengzhishui/article/details/120492755

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.什么是AJAX？

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

一、get无参

<!--
 * @Author: [jsh]
 * @Date: 2021-09-26 16:14:54
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-26 16:43:33
 * @Description: 
-->
<!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>
        var xhr=new XMLHttpRequest();
        // 2.打开一个连接
        xhr.open("get",'http://47.93.206.13:8002/index/findAllCategory');
        // 3.发送请求
        xhr.send();
        // 4.接收响应
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&xhr.status===200){
                console.log(xhr.responseText)
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

二、get携带参数

<!--
 * @Author: [jsh]
 * @Date: 2021-09-26 16:23:56
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-26 16:43:17
 * @Description: 
-->
<!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="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script>
        var qs=Qs
        // 创建一个实例
        var xhr=new XMLHttpRequest();
        // 2.打开一个连接
        let obj={
            page:1,
            pageSize:10
        }
        // 转换为查询字符串 Qs.stringify
        console.log(qs.stringify(obj))
        xhr.open('get',"http://47.93.206.13:8002/index/pageQueryArticles"+'?'+qs.stringify(obj));
        xhr.send();
        // 4.接收响应
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&xhr.status===200){
                console.log(xhr.responseText)
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

三、post携带参数

<!--
 * @Author: [jsh]
 * @Date: 2021-09-26 16:29:06
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-26 16:50:20
 * @Description: 
-->
<!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>
        let obj={
            username:'admin1',
            password:'123321'
        }
        // 创建一个实例
        var xhr=new XMLHttpRequest();
        // 2.打开一个连接
        xhr.open('post',"http://47.93.206.13:8002/user/login");
        xhr.setRequestHeader('Content-Type','application/json');
        //发送请求
        xhr.send(JSON.stringify(obj));
        // 4.接收响应
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&xhr.status===200){
                console.log(xhr.responseText)
            }
        }
    </script>
</head>
<body>
    
</body>
</html>