ajax处理服务器返回的数据

最新推荐文章于 2022-11-21 15:16:28 发布

yrfjygb

最新推荐文章于 2022-11-21 15:16:28 发布

阅读量337

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/yrfjygb/article/details/114534613

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.express

// 导入express
const express = require('express')

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

//设置跨域访问
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

// 创建路由规则
app.post('/serve',(require,response) => {
  // 发送数据
  const data = {
    success: 'success'
  }
  response.send(JSON.stringify(data))
})

// 监听端口启动服务
app.listen(8888,() => {
  console.log('服务启动成功了！！！');
  
})

2. ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <style>
        #result {
            margin-top: 10px;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(204, 204, 204);
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="page-header">ajax发送请求</h2>
        <button class="btn btn-primary">发送请求</button>
        <div id="result"></div>
    </div>
    <script>
        const btn = document.querySelector('button')
        const result = document.getElementById('result')
        btn.onclick = function (){
            // 创建xhr对象
            const xhr = new XMLHttpRequest()
            // 自动转换
            xhr.responseType = 'json'
            // 初始化
            xhr.open('post','http://localhost:8888/serve');
            // 发送
            xhr.send('a=100')
            // 判断
            // readyState的值：
            // 0    未初始化
            // 1    open方法调用完毕
            // 2    send方法调用完毕
            // 3 返回服务器的部分结果
            // 4  返回服务器的全部结果
            // change 改变的时候触发
           // onreadystatechange() 将会触发4次
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4) {
                    // 判断状态码是否是 2xx，2xx表示成功
                    if(xhr.status >= 200 && xhr.status < 300) {
                        // 打印响应码
                        console.log(xhr.status);
                        // 打印响应字符串
                        console.log(xhr.statusText);
                        // 打印响应头
                        console.log(xhr.getAllResponseHeaders);
                        // 打印响应体
                        console.log(xhr.response);
                        
                        // 将返回的数据显示在result元素里
                        //1. 手动转换
                        // const rs = JSON.parse(xhr.response)
                        // result.innerHTML = rs.success
                        // 2.自动转换 xhr.respon
                        result.innerHTML = xhr.response.success
                    }
                }
            }
        }
    </script>
</body>
</html>