Nodejs express 响应按钮事件，不使用router

Nodejs express 响应按钮事件，不使用router

在某一个页面。填写了一些输入框。然后点击一个button做一些数据库操作。但是我想处理完之后页面不刷新，也就是之前输入的信息保持不变。 这个需要重新routes吗？还是在app.js里除了get, set, post之外有其他的方法呢。

举例说明：

需求：

在页面上点击 按钮 数据库进行初始化

使用routes路由，以便能够在服务器端执行数据库操作的 代码：

服务器端： 
app.js
app.get('/initializing', routes.initialize); 

index.js
exports.initialize = function(req, res){
console.log(‘initializing’);
//写业务代码，进行数据库初始化
// …成功
// 重定向到原页面
res.redirect("/") ; // 地址重写
};

除此之外，还需要在服务器上新建initializing.html空白页面。否则404 且，这样的方法返回后就重新刷新了原页面。原页面上所填的信息就丢失了。

客户端：
index.ejs
<input type="text" id="myIndexText"/>
...
<a id="initializing" href="/initializing" >数据初始化</a>

问题：

必须用此方法routes下实现吗？
还是在app.js里除了get, set, post之外有其他的方法呢。
或者ajax或者其他的方法呢？
我不知道该怎么写，求测试代码。
谢谢！！！

9 回复

Nodejs express 响应按钮事件，不使用router

背景介绍

在某个页面中，用户填写了一些输入框，然后点击一个按钮以进行某些数据库操作。理想情况下，我们希望在完成数据库操作后页面不刷新，从而保留用户之前输入的信息。

需求

  • 在页面上点击按钮时，对数据库进行初始化。

解决方案

我们可以使用 AJAX 技术来实现这一功能。通过 AJAX，可以在不刷新页面的情况下与服务器进行通信，并处理响应结果。

示例代码

  1. 客户端代码 (index.ejs)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Database Initialization</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="myIndexText" placeholder="Enter something here"/>
    ...
    <button id="initializing">数据初始化</button>

    <script>
        document.getElementById("initializing").addEventListener("click", function() {
            $.ajax({
                url: "/initialize",
                method: "POST",
                success: function(response) {
                    alert("数据库初始化成功！");
                },
                error: function(error) {
                    alert("数据库初始化失败！");
                }
            });
        });
    </script>
</body>
</html>
  1. 服务器端代码 (app.js)
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用body-parser中间件解析请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 处理数据库初始化请求
app.post('/initialize', function(req, res) {
    console.log('Database initialization request received.');

    // 这里可以调用你的数据库初始化逻辑
    // 例如：db.init()

    res.status(200).send({ message: '数据库初始化成功' });
});

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

解释

  • 客户端：通过 jQuery 的 $.ajax 方法发送一个 POST 请求到 /initialize。当请求成功时，会弹出提示信息。
  • 服务器端：定义了一个处理 /initialize 路径的 POST 请求的处理函数。这个函数会执行数据库初始化逻辑，并返回一个 JSON 响应。

通过这种方式，我们避免了页面刷新，保持了用户输入的数据，并且可以在服务器端进行所需的数据库操作。


ajax

能否明示？ 哪里有实例可以参考下的呢？

主要是服务器端不知道该怎么写。。

页面上除了 get, set, post 还怎么让服务器端执行function呢？

使用ajax，就是写个function(result){…}。
在models中进行数据的操作。如果修改成功，就callback(1),否则callback(0).在客户端请求的代码中对返回值进行判断.得到的是1就维持现状，0则清空并且提示！

###注意：刚刚写的只是实现的思路。具体的业务还要补充一些。

不是让服务器执行fn，而是有请求进服务器了，才响应该请求，去执行该执行的fn。 ajax请求也一样，和普通的网页请求类似，只不过它是异步的而已。

好的，谢谢大家！

下面是我写的一个例子。主要是之前不知道服务器端有： res.send(“来自服务器的响应”); }

res对象还有其他什么方法嘞？

服务器端

                app.js

                   app.get('/initializing2', routes.initialize2);

            index.js


                    exports.initialize2 = function(req, res){
   console.log('initializing2'); 
   res.send("来自服务器的响应"); }

客户端

                     <h2>AJAX</h2>
                    <button type="button" onclick="loadXMLDoc()">请求数据</button>
                    <div id="myDiv"></div>

                    <script>
                        //AJAX
                        function loadXMLDoc()
                        {
                            var xmlhttp;
                            var str;
                            if (window.XMLHttpRequest)
                            {// code for IE7+, Firefox, Chrome, Opera, Safari
                                xmlhttp=new XMLHttpRequest();
                            }
                            else
                            {// code for IE6, IE5
                                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            xmlhttp.onreadystatechange=function()
                            {
                                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                                {
                                    str = xmlhttp.responseText;//得到服务器响应
                                    document.getElementById("myDiv").innerHTML=str;
                                }
                            }

                            xmlhttp.open("GET","/initializing2",true);
                            xmlhttp.send();
                        }
                    </script>

a o , 格式不太好。。。

要实现点击按钮后进行数据库操作而不刷新页面，可以使用 AJAX 来发送异步请求。这样可以在不刷新页面的情况下更新数据库，并保留用户在表单中的输入。

示例代码

服务器端 (app.js)

你可以直接在 app.js 中定义一个处理函数来响应 AJAX 请求，而不需要通过路由文件：

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

// 定义一个处理AJAX请求的函数
app.post('/initialize-db', (req, res) => {
    console.log('Initializing database...');
    
    // 执行数据库初始化操作
    // 例如：db.initialize()

    // 返回一个简单的响应
    res.json({ success: true });
});

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

客户端 (index.ejs)

使用 JavaScript 发送 AJAX 请求来响应按钮点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.0/axios.min.js"></script>
</head>
<body>
<input type="text" id="myIndexText"/>
<button id="initializing">数据初始化</button>

<script>
document.getElementById('initializing').addEventListener('click', async () => {
    try {
        const response = await axios.post('/initialize-db', {}, {
            headers: { 'Content-Type': 'application/json' }
        });
        
        if (response.data.success) {
            alert('数据库初始化成功！');
        } else {
            alert('数据库初始化失败！');
        }
    } catch (error) {
        console.error('Error initializing database:', error);
        alert('请求失败，请检查网络或服务器状态。');
    }
});
</script>
</body>
</html>

解释

  1. 服务器端:

    • 使用 app.post('/initialize-db', ...) 定义一个处理 POST 请求的函数。
    • 这个函数将执行数据库初始化操作并返回一个 JSON 响应。

  2. 客户端:

    • 使用 axios 库发送一个 POST 请求到 /initialize-db。
    • 按钮点击时触发 AJAX 请求，响应成功则提示用户数据库已初始化，失败则提示错误信息。

这种方法避免了页面刷新，同时保持了用户的输入数据。

回到顶部