笔记：利用ajax请求数据

最新推荐文章于 2023-01-30 13:37:44 发布

weixin_49596018

最新推荐文章于 2023-01-30 13:37:44 发布

阅读量152

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/109962629

版权

这篇笔记介绍了如何使用Ajax从后台获取数据。首先通过Express搭建服务器环境，然后在客户端编写Ajax请求，利用lodash.min.js处理数据。最终目标是实现点击按钮时，向后台发起异步请求并成功在控制台输出序列化的数组数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用ajax向后台请求数据
一、下载express 工具包
win+r 运行 cmd
1、修改淘宝源：npm config set registry https://registry.npm.taobao.org
2、创建一个工程目录 myapp，并进入目录
3、项目初始化：npx express-generator
4、安装依赖：npm install
5、启动 npm start
6、使用 http://localhost:3000 访问，查看访问页面页面出现Express界面则运行成功。
二、准备工作
打开编辑器，在src下面删除摩恩文件夹，新建文件夹public—src—[lib和utilis];

在这里插入图片描述

lib文件夹用于存放第三方的js文件。
utilis用于存放自己封装的要引入的js文件
三、 lodash文件的安装——控制台运行 npm install lodash。运行之后，在文件夹搜索lodash.min.js文件搜到以后把该文件赋值粘贴到 lib文件夹下面
四要实现的结果——利用异步请求，单击按钮，请求成功的话控制台输出
[1,2,3,4]
[5,6,7,8]
[9,10,11,12]
[13,14,15,16]

实现效果：
在这里插入图片描述
四、html代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步请求数据</title>
</head>
<body>
    
<div id="beg">
    
</div>

<script src="./src/lib/lodash.min.js"></script>
<script  type="module" src="./src/index.js"></script>
</body>
</html>

五、客户端（请求端的代码）

// 接收暴露出来的ajax请求js文件
import{request}from "./utilis/request.js"

class Beg {
    constructor({ el } = {}) {
        this.$el = document.querySelector(el);
        this.init();

    }
    // 初始化
    init() {
        this.render();
        this.handle();
    };
    // 渲染 
    render() {
        this.$el.innerHTML = `
        <input  value="生成"  type="button" id="produce"/>
        `
    }
    // 初始化的方法
    handle() {
        let inputEle = document.getElementById("produce");
        // 点击的时候调用request方法
        inputEle.addEventListener("click",request)
    }


}


new Beg({ el: "#beg" });

六、封装函数端的js文件【备注：客户端按钮点击的时候在向后台发送请求】

//序列化：拼接传入的类型，如果是get类型的就进行凭借。


// 发送ajax请求的方法函数js文件
export function request() {
    // callback();
    // 异步四阶段函数
    asyncFn();

}

// 单独响应，如果成功就返回一阶段的响应文；
// 如果要继续返回二三四阶段的响应文，就是回调地狱模式
// function callback() {
//     let xhr = new XMLHttpRequest();
//     xhr.open("post", "/users/one");
//     xhr.setRequestHeader("Content-type", "application/json")
//     xhr.send();
//     xhr.onreadystatechange = () => {
//         // 请求成功 readyState：ajax的状态值    status：http的状态值
//         if (xhr.readyState == 4 && xhr.status == 200) {
//             console.log(xhr.responseText);
//         }
//     }
// }


async  function asyncFn(){
    let data1=await new Promise(
        (resolve,reject)=>{
            let xhr=new XMLHttpRequest();
            xhr.open("POST","/users/one");
            xhr.setRequestHeader("Content-type","application/json");
            xhr.send();
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4&&xhr.status==200){
                    // resolve:代表成功， 响应文就会返回给data1
                    resolve(xhr.responseText)
                }
            }
        }
    );

    console.log(data1);

    let data2=await new Promise(
        (resolve,reject)=>{
            let xhr=new XMLHttpRequest();
            xhr.open("POST","/users/two");
            xhr.setRequestHeader("Content-type","application/json");
            xhr.send();
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4&&xhr.status==200){
                    // resolve:代表成功， 响应文就会返回给data2
                    resolve(xhr.responseText)
                }
            }
        }
    );
    console.log(data2);

    let data3=await new Promise(
        (resolve,reject)=>{
            let xhr=new XMLHttpRequest();
            xhr.open("POST","/users/three");
            xhr.setRequestHeader("Content-type","application/json");
            xhr.send();
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4&&xhr.status==200){
                    // resolve:代表成功， 响应文就会返回给data3
                    resolve(xhr.responseText)
                }
            }
        }
    );
    console.log(data3);

    let data4=await new Promise(
        (resolve,reject)=>{
            let xhr=new XMLHttpRequest();
            xhr.open("POST","/users/four");
            xhr.setRequestHeader("Content-type","application/json");
            xhr.send();
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4&&xhr.status==200){
                    // resolve:代表成功， 响应文就会返回给data4
                    resolve(xhr.responseText)
                }
            }
        }
    );
    console.log(data4);




}

七、后台的响应文

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
// one就是代表一个地址
router.post('/one', function(req, res, next) {
  res.send([1,2,3,4]);
});

router.post('/two', function(req, res, next) {
  res.send([5,6,7,8]);
});

router.post('/three', function(req, res, next) {
  res.send([9,10,11,12]);
});

router.post('/four', function(req, res, next) {
  res.send([13,14,15,16]);
});



module.exports = router;