Node服务器与AJAX复习第一天

2023-09-20 21:27:02

## 正文各位读者大家好，很高兴大家能在百忙之中抽出时间来阅读我的文章。今天我要跟大家分享的是Node服务器和AJAX第一天复习的内容。

在开始今天的内容之前，我们先来回顾一下上节课的内容。上节课我们学习了Node.js的基本知识，包括如何安装Node.js、如何使用Node.js包管理器NPM、以及如何编写基本的Node.js脚本。

今天我们继续学习Node.js，但这次我们将重点放在服务器端开发上。我们将学习如何使用Node.js创建一个简单的HTTP服务器，以及如何使用AJAX技术从客户端向服务器端发送请求。

首先，我们先来创建一个Node.js项目。在终端中输入以下命令：

mkdir node-server-ajax-review
cd node-server-ajax-review
npm init -y

这将创建一个新的Node.js项目，并自动生成一个package.json文件。

接下来，我们需要安装必要的依赖包。在终端中输入以下命令：

npm install express body-parser

Express是一个Node.js框架，它可以帮助我们快速开发HTTP服务器。Body-parser是一个Node.js中间件，它可以帮助我们解析HTTP请求中的body数据。

安装完成后，我们就可以开始编写代码了。在项目目录中创建一个server.js文件，并输入以下代码：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.post('/data', (req, res) => {
  console.log(req.body);
  res.send('Data received!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

这段代码首先引入Express和Body-parser包。然后，它创建一个新的Express应用程序。接下来，它使用Body-parser中间件来解析HTTP请求中的body数据。然后，它定义了两个路由。第一个路由是根路由，它将响应一个简单的“Hello World!”消息。第二个路由是/data路由，它将响应一个JSON数据。最后，它启动服务器，并监听3000端口。

现在，我们可以运行服务器了。在终端中输入以下命令：

node server.js

这将启动服务器。现在，我们可以打开浏览器，并在地址栏中输入http://localhost:3000。我们应该会看到“Hello World!”消息。

接下来，我们可以使用AJAX技术从客户端向服务器端发送请求。在HTML页面中，我们添加以下代码：

<form id="data-form">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

<script>
  const form = document.getElementById('data-form');

  form.addEventListener('submit', (event) => {
    event.preventDefault();

    const data = {
      name: event.target.querySelector('input[name="name"]').value,
    };

    fetch('http://localhost:3000/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.error(error);
    });
  });
</script>