Nodejs express模块的一个问题

Nodejs express模块的一个问题

我set(‘view engine’, ‘ejs’);然后我想在某一个页面。选择了一些checkbox，并填写了一些输入框。然后点击上面的一个button提交做一些处理。但是我想处理完之后当前页面保持不变。就是所有我的选择和输入信息都保持不变。然后在页面上添加一点东西。 这个需要重新render吗？还是说有现成的方法，直接在现有页面上添加东西就可以？

不知道我有没有描述清楚。 静候高手指教！

6 回复

当然可以！你提到的问题是在使用 Express 和 EJS 模板引擎时，如何在处理表单提交后保留页面上的输入和选择，同时向页面中添加一些新的内容。这通常可以通过重新渲染页面并传递新的数据来实现。

示例代码

假设你有一个简单的 HTML 表单，其中包含一些复选框和文本输入框，并且有一个按钮用于提交表单。你希望在处理完表单提交后，保留用户的选择和输入，并在页面上添加一条消息。

1. 设置 Express 和 EJS

首先确保你已经安装了 express 和 ejs：

npm install express ejs

2. 创建 Express 应用

创建一个简单的 Express 应用：

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

app.set('view engine', 'ejs');

// 解析表单数据
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
    res.render('index', { 
        checkboxes: [], 
        textInputs: '', 
        message: '' 
    });
});

app.post('/', (req, res) => {
    const { checkbox1, checkbox2, textInput } = req.body;
    // 处理表单数据
    const message = `You selected ${checkbox1 ? 'Checkbox 1' : ''} and ${textInput}`;

    // 渲染页面并传递新的数据
    res.render('index', { 
        checkboxes: [checkbox1, checkbox2], 
        textInputs: textInput, 
        message: message 
    });
});

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

3. 创建 EJS 模板

创建一个 views/index.ejs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Example</title>
</head>
<body>
    <h1>Form Example</h1>
    <form action="/" method="post">
        <label>
            <input type="checkbox" name="checkbox1" value="true" <%= checkboxes.includes('true') ? 'checked' : '' %> >
            Checkbox 1
        </label><br>
        <label>
            <input type="checkbox" name="checkbox2" value="true" <%= checkboxes.includes('true') ? 'checked' : '' %> >
            Checkbox 2
        </label><br>
        <label for="textInput">Text Input:</label>
        <input type="text" id="textInput" name="textInput" value="<%= textInputs %>"><br>
        <button type="submit">Submit</button>
    </form>
    <% if (message) { %>
        <div style="margin-top: 20px; color: green;">
            <%= message %>
        </div>
    <% } %>
</body>
</html>

解释

  1. 设置视图引擎：我们设置了 EJS 作为视图引擎。
  2. 解析表单数据：我们使用 express.urlencoded() 来解析表单数据。
  3. GET 请求：当用户访问首页时，我们渲染初始的表单页面。
  4. POST 请求：当用户提交表单时，我们处理表单数据并在页面上显示一条消息。
  5. EJS 模板：我们使用 EJS 的语法来动态生成表单元素，并根据服务器传递的数据来更新它们的状态（例如，复选框是否被选中，文本输入框的值）。

通过这种方式，你可以保留用户的输入和选择，并在页面上添加新的内容。


用ajax请求

多谢

多谢

帅哥，能否给一个ajax的demo。比如一个输入框，一个button。点击一次button，输入框里面的数值增加1！但是却不刷新页面。多谢多谢

在Express中使用EJS模板引擎时，如果你希望在提交表单后保持当前页面的状态并仅添加一些新的内容，可以使用AJAX来实现这一需求。这样，你可以在不刷新整个页面的情况下更新部分页面内容。

示例代码

1. 设置路由和控制器

首先，在你的Express应用中设置一个路由来处理表单提交：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.render('index'); // 渲染初始页面
});

app.post('/submit-form', (req, res) => {
  const { checkbox, input } = req.body;
  
  // 处理逻辑，例如保存数据或执行其他操作
  console.log(`Checkbox: ${checkbox}, Input: ${input}`);

  // 返回JSON响应
  res.json({ message: 'Form submitted successfully', data: { checkbox, input } });
});

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

2. EJS 模板文件 (views/index.ejs)

在EJS模板文件中，创建一个表单，并添加一个用于显示动态内容的区域：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Form</title>
</head>
<body>
  <form id="myForm" action="/submit-form" method="POST">
    <label>
      <input type="checkbox" name="checkbox" value="option1"> Option 1
    </label><br>
    <input type="text" name="input" placeholder="Enter something"><br>
    <button type="submit">Submit</button>
  </form>

  <!-- 动态内容将显示在这里 -->
  <div id="dynamicContent"></div>

  <script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止表单默认提交行为
      
      fetch(this.action, {
        method: this.method,
        body: new FormData(this)
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById('dynamicContent').innerHTML += `
          <p>Checkbox: ${data.data.checkbox}</p>
          <p>Input: ${data.data.input}</p>
        `;
      });
    });
  </script>
</body>
</html>

解释

  • 服务器端：当表单提交时，服务器接收POST请求，处理数据，并返回JSON响应。
  • 客户端：使用JavaScript的fetch API来异步发送表单数据到服务器，并根据服务器返回的数据动态更新页面中的部分内容。

这种方法避免了页面的完全刷新，从而保持了用户界面的一致性。

回到顶部