实现ajax和node服务器的数据相互调用

作者: 帅春风 | 来源:发表于2021-06-20 16:31 被阅读0次

实现ajax和node服务器的数据相互调用
AJAX
vue起步(2)之数据交互
Ajax
Ajax 学习教程
我的前端入门笔记(12)--ajax
AJAX
AJAX基础
RTC 监控系统体系
Ajax

本案例实现的目的，主要不是为了使用node，而是通过简单的关联关系，来看ajax的特性，以及我们要如何使用ajax。所以下面几段代码，可以更关注前端js中ajax的内容，以及服务端server.js的接受机制。

实现过程：

HTML代码

在html里面，增加容器button和类名为“datamug”的p容器。
底部加载jq和test.js文件。

<!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>
</head>
<body>
    Hello world100!
    <button>点击我吧！</button>
    <p class="datamug"></p>
</body>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/test.js"></script>
</html>

前端javascript文件test.js

按钮单击的时候，触发异步请求get
使用jq的get方法，把链接/butclick上的数据，传递给服务器
将数据库的数据通过data传回来，并把数据放到类名为datamug的容器中

$(function(){
    console.log("Hello world!")
    $("button").click(function(){
        $.get("/butclick?value=12345", function(data, status){
            alert("数据：" + data);
            $(".datamug").append(data);
        });
    });
});

服务端javascript文件server.js

假设我们已经加载了express的包了
在app上接收链接/butclick的请求
把请求上的数据从req.query.value中获取过来
打印获取的数据
把数据拼接给对象data
把data打包到响应中，传递给前端
关闭响应

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')))
app.get("/butclick", function(req, res){
  console.log(req.query.value);
  var data = "this is a data!" + req.query.value;
  res.send(data);
  res.end();
});
app.listen(8080, () => {
  console.log('App listening at port 8080, 你可以进入查看http://127.0.0.1:8080/');
})

界面效果：

点击前：

image.png
点击后：

image.png
关闭弹窗：

image.png

过程分析：

使用jq调用ajax，代码更简单
ajax简单的讲，就是具有异步数据传输能力的一个工具，有load，get和post等方法，适用各种异步数据传输的场景。我们这个案例使用get，所以数据需要放在发送请求的链接上。
ajax的基本过程就是，发送一个请求（请求的名字随意取），请求带参数。请求发送给服务器端，服务器端对应接收，然后拿到请求的数据之后，再经过加工处理，把结果数据给响应对象打包，响应对象打包了之后，就回传给前端。