一个JSONP的小案例

最新推荐文章于 2024-05-20 22:41:35 发布

weixin_34343000

最新推荐文章于 2024-05-20 22:41:35 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 javascript ViewUI

原文链接：https://juejin.im/post/5c8a23a1f265da2dbf5f4acd

本文详细介绍了在一个简单的网页支付场景中，如何通过前端JavaScript与后端Node.js进行交互来实现支付功能。具体包括了如何动态更新HTML页面中的账户余额，以及在用户点击付款按钮后，前端如何异步调用后端的支付接口，并处理支付结果。

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

index.html代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>付款页面</title>
</head>

<body>
  <h1>您的账户余额为：<span id="money">_money</span></h1>
  <button id="button">付款</button>

  <script>
    let money = document.getElementById('money');
    let button = document.getElementById('button');
    button.addEventListener('click', e => {
      let script = document.createElement('script');
      let functionName = 'lvbin' + parseInt(Math.random() * 100000, 10);
      window[functionName] = function (result) {
        if (result === 'success') {
          money.innerText = money.innerText - 1;
        }
      }
      script.src = '/pay?callback=' + functionName;
      document.body.appendChild(script);
      script.onload = e => {
        e.currentTarget.remove();
        delete window[functionName];
      };
      script.onerror = e => {
        e.currentTarget.remove();
        delete window[functionName];
      };
    });
  </script>
</body>

</html>
复制代码

server.js代码：

const http = require("http");
const fs = require("fs");
const url = require("url");
const childProcess = require("child_process");

const port = process.env.PORT || 3000;

//调用http的createServer方法，它可以创建一个网络服务。接受请求并响应
const server = http.createServer((request, response) => {
  const path = url.parse(request.url, true).pathname;
  const query = url.parse(request.url, true).query;
  if (path === "/") {
    let string = fs.readFileSync("./index.html", "utf8");
    let money = fs.readFileSync("./money");
    response.setHeader("Content-Type", "text/html");
    string = string.replace("_money", money);
    response.write(string);
    response.end();
  }
  if (path === "/pay") {
    let money = fs.readFileSync("./money", "utf8");
    let newMoney = money - 1;
    fs.writeFileSync("./money", newMoney);
    response.setHeader("Content-Type", "application/javascript");
    response.statusCode = 200;
    response.write(`${query.callback}.call(undefined,"success")`);
    response.end();
  } else {
    response.statusCode = 400;
    response.end();
  }
});

//调用server对象的listen方法，设置监听的端口号
server.listen(port);

console.log(`正常监听,服务运行在：http://127.0.0.1:${port}`);
//自动在浏览器打开地址

childProcess.exec(`start http://127.0.0.1:${port}`);
复制代码