node.js作为后端发布接口，前端使用ajax访问，简单应用示例

作者：System 时间：2024年08月19日分类：所有,ajax 字数：1220

以下是使用Node.js作为后端发布API接口，并且前端使用AJAX访问的简单示例。

Node.js后端代码（server.js）:




const express = require('express');
const app = express();
const port = 3000;
 
app.get('/api/data', (req, res) => {
  const response = {
    message: 'Success!',
    data: {
      id: 1,
      name: 'Sample Data'
    }
  };
  res.json(response); // 返回JSON响应
});
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

确保你已经安装了Express：




npm install express

前端HTML和JavaScript代码:




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX Example</title>
  <script>
    function fetchData() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:3000/api/data', true);
      xhr.onload = function() {
        if (this.status == 200) {
          const response = JSON.parse(xhr.responseText);
          document.getElementById('data').textContent = JSON.stringify(response, null, 2);
        }
      };
      xhr.send();
    }
  </script>
</head>
<body>
  <button onclick="fetchData()">Fetch Data</button>
  <pre id="data"></pre>
</body>
</html>

确保你的Node.js服务器正在运行，然后打开这个HTML文件，点击按钮 "Fetch Data" 来通过AJAX请求后端API。

node.js作为后端发布接口，前端使用ajax访问，简单应用示例

评论已关闭

推荐阅读