AJAX请求（GET、POST、响应JSON）_ajax post json

最新推荐文章于 2025-03-13 20:34:16 发布

2401_86963534

最新推荐文章于 2025-03-13 20:34:16 发布

阅读量1.6k

点赞数 8

文章标签： ajax json okhttp

本文链接：https://blog.csdn.net/2401_86963534/article/details/142113069

版权

<div id="result"></div>

```

在浏览器中打开后如下，

再写一个服务端js（server.js），/server是路径

//1、引入express
const express = require('express');

//2、创建应用对象
const app = express();

//3、创建路由规则（request是对请求报文的封装，response是对响应报文的封装）
app.get('/server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX');
});

//4、监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已启动，8000端口监听中... ...");
})

输入http://127.0.0.1:8000/server访问请求后响应得到预置的响应体。

修改html文件，拿到button元素和result结果，button绑定请求事件后响应成功设置result文本信息。

<!-- !直接出模版 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1、创建对象
            const xhr = new XMLHttpRequest();
            //2、初始化，设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server');
            //3、发送
            xhr.send();
            //4、事件绑定   处理服务端返回的结果    readystate是xhr对象中的属性，表示状态 
            xhr.onreadystatechange = function(){
                //判断readystate状态0——（未初始化）还没有调用send方法；1——（载入）已经调用send方法，正在发送请求；2——（载入完成）send方法执行完成，已经接收到全部响应内容；3——（交互）正在解析响应内容；4——（完成）响应内容解析完成，可以在客户端调用
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    //2xx成功
                    if(xhr.status >= 200 && xhr.status<300){
                        //处理结果  行 头 空行 体
                        // 1、响应行
                        // console.log(xhr.status);    //状态码
                        // console.log(xhr.statusText);    //状态字符串
                        // console.log(xhr.getAllResponseHeaders()); //所有响应头
                        // console.log(xhr.response);  //响应体
                        
                        // //设置result的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }
    </script>
</body>
</html>

最后得到的效果如下，如果需要在请求里加上参数使用?parameter=100这样的方式多个参数用&，

POST请求与GET请求类似，虽然GET请求更简单更快，但是下面几种情况应该使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）。
向服务器发送大量数据（POST 没有数据量限制）。
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

下面看一下JSON的案例，按下键盘任意键触发事件响应服务器的JSON数据，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';

            xhr.open('GET','http://127.0.0.1:8000/json-server');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.response)
                        // result.innerHTML = xhr.response;
                        //1、手动将数据转换一下
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        //2、自动转换，上面设置响应数据类型
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

上面是响应JSON的Html文件，下面是server.js中的代码，响应一个数据集合

app.get('/json-server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应一个数据
    const data = {
        name : 'my test data',
        age : 23
    };
    let str = JSON.stringify(data);
    response.send(str)
});

按下按键响应结果如下，

Nodemon

官网：https://www.npmjs.com/package/nodemon

nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序，毕竟上面的调试过程每次修改都需要重新重启。

按照官网安装后，可以输入nodemon server.js即可启动，如下图

后面进行修改js后，保存就会restarting。简化我们的调试。

jQuery

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。引入jQuery库可以在https://www.bootcdn.cn/中搜索该库的url进行引用，不过实际开发过程中需要考虑自己所引用的依赖是否稳定。

jQuery具体学习可以参考w3School官网上的：https://www.w3school.com.cn/jquery/jquery_animate.asp，去实现各元素实例的操作。

下面给出一个使用jQuery发送Ajax请求的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 发送 AJAX请求</title>
    <!-- html link 必须要有，告诉浏览器引入了一个样式，type="text/css"表示 类型=层次/样式-->
    <link crossorigin="anonymous" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap-grid.css">

    <!-- 加上crossorigin="anonymous" 跨源属性设置 匿名——向后面这个发起请求时将不会携带当前域名下的cookies -->
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">JQuery 发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法AJAX</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            //第一个参数是请求URL，第二个参数是一个对象，第三个参数是一个回调函数
            $.get('http://127.0.0.1:8000/jQuery-server',{a:100,b:200}, function(data){
                console.log(data)
            },'json')   //后面加json，表明请求返回的响应体是一个json对象
        })
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jQuery-server',{a:100,b:200}, function(data){
                console.log(data)
            })
        })
        $('button').eq(2).click(function(){
            $.ajax({
                //url,请求delay方法会因为请求超时而调用失败回调函数
                url: 'http://127.0.0.1:8000/jQuery-server',
                //参数
                data: {a:100,b:200},
                //请求类型
                type: 'GET',
                //响应体结果类型
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('请求出错了！')
                },
                //头信息
                headers:{
                    c:300,
                    d:400
                }
            })
        })
    </script>
</body>
</html>