Node.js点击按钮无法渲染depot_details_pg页面问题求助

我的Node.js应用主进程中，登录流程完成后，若用户类型为viewer，会渲染depot_list_pg视图。当用户点击按钮从列表中选择仓库时，希望渲染depot_details_pg视图。前序流程均正常，但第二个app.post路由中的res.render无论如何都无法生效，请问该如何解决？

主进程：server_main2.js #

// Route to authenticate the user
app.post('/server_main2', (req, res, next) => { 
    var clientid = req.body.clientid;
    var userid = req.body.userid;
    var userpwd = req.body.userpwd;
    if (clientid && userid && userpwd) {  //Check if user has entered clientid, userid and userpwd in the login form.
        con.query('SELECT * FROM users WHERE clientid = ? AND userid = ? AND userpwd = ?', [clientid, userid, userpwd], function(err, row) {   
                req.session.row = row;
                if (row.length > 0) {  //If user name/pwd is found in db,
                        req.session.userid = userid;  //save user name input from user.
                        req.session.loggedin = true;
                        if (row[0].usertype == 'admin') { //If user is an administrator,
                            res.render('admin_menu_pg')  //display admin menu page.
                        } else if (row[0].usertype == 'usermgm') {  // If user is from client management,
                                    res.render('usermgm_menu_pg')  //display client management menu page.
                               } else if (row[0].usertype == 'viewer') {  // if user is of viewer type. 
                                        get_depot_list(clientid, function(response){ // Call function to get list of depots for this client.
                                            data = response
                                            res.render('depot_list_pg',{data}) // Display water depot list page.
                                        }) 
                } else {
.
.
})
//Route to display depot details page.
app.post('/depot_details_pg', (req, res) => { 
    var depot_name = req.body.depot_name;  // Save depot name from jquery and save it in a variable.
        // Below, we retrieve data from water_depots table for the selected depot name. 
        con.query('SELECT * FROM water_depots WHERE depot_name = ?', [depot_name], function(err,data) { 
            if (data.length > 0) {  // If a row is found 
                res.render('depot_details_pg', {data}) //Display depot_details_pg view
            }   
        }); 
}); 

depot_list_pg.ejs代码 #

<script>
        function get_depot_name() {    
            $("#depselect_btn").click(function(){
                var activeRow=$(this).closest("tr");
                var depot_name=activeRow.find("td:eq(1)").text();
                $.post({
                    url: '/depot_details_pg', data: {depot_name: depot_name}, dataType: 'json', success: function(response){}
                })
            }) 
        }    
</script>
.
.
<tbody>
<% if(data.length){
    for(var i = 0; i< data.length; i++) {%> 
            <tr>
                <td><%=data[i].clientid%></td>
                <td><%=data[i].depot_name%></td>
                <td><%=data[i].city%></td>
                <td><%=data[i].town%></td>
                <td><%=data[i].willage%></td>
                <td><%=data[i].number_of_pumps%></td>
                <td><%=data[i].depot_status%></td>
                <td><button type="button" onclick="get_depot_name()" name="depselect_btn" id="depselect_btn" class="depselect_btn">Depoyu seç</button></td>
                <td></td>                                 
            </tr>
    <%}
        }else{ %>
            <tr>
                <td colspan="7">Gosterilecek veri yok</td>
            </tr>
            <% } %> 
</tbody>         

1. AJAX请求与响应不匹配 #

你用$.post发起AJAX请求时，指定了dataType: 'json'，但后端用res.render返回的是完整HTML页面，不是JSON格式。浏览器会因为解析失败直接忽略返回内容，自然不会渲染新页面。

解决方式：

• 若需求是跳转新页面，直接放弃AJAX，改用页面跳转（推荐）；
• 若坚持用AJAX局部更新，去掉dataType: 'json'，并在成功回调里替换页面内容。

2. 按钮绑定逻辑错误 #

• 多个按钮共用同一个IDdepselect_btn，违反HTML ID唯一性规范；
• 按钮的onclick事件内部又重复绑定click事件，导致多次触发且逻辑混乱。

解决方式：

• 删除按钮的onclick属性，用类选择器depselect_btn统一绑定点击事件；
• 移除重复的ID属性，只保留类名。

3. 修正后的代码示例 #

后端（可选改成GET路由，更符合页面跳转场景） #

app.get('/depot_details_pg', (req, res) => { 
    var depot_name = req.query.depot_name;
    // 必须处理数据库查询错误，避免服务崩溃
    con.query('SELECT * FROM water_depots WHERE depot_name = ?', [depot_name], function(err,data) { 
        if(err){
            console.error(err);
            return res.status(500).send("服务器错误");
        }
        if (data.length > 0) {
            res.render('depot_details_pg', {data})
        } else {
            res.status(404).send("仓库不存在");
        }   
    }); 
});

前端（页面跳转版本） #

<script>
$(document).ready(function(){
    // 用类选择器绑定所有按钮
    $(".depselect_btn").click(function(){
        var activeRow=$(this).closest("tr");
        var depot_name=activeRow.find("td:eq(1)").text();
        // 直接跳转至详情页，自动触发后端GET路由渲染页面
        window.location.href = `/depot_details_pg?depot_name=${encodeURIComponent(depot_name)}`;
    });
});
</script>

<tbody>
<% if(data.length){
    for(var i = 0; i< data.length; i++) {%> 
            <tr>
                <td><%=data[i].clientid%></td>
                <td><%=data[i].depot_name%></td>
                <td><%=data[i].city%></td>
                <td><%=data[i].town%></td>
                <td><%=data[i].willage%></td>
                <td><%=data[i].number_of_pumps%></td>
                <td><%=data[i].depot_status%></td>
                <td><button type="button" name="depselect_btn" class="depselect_btn">Depoyu seç</button></td>
                <td></td>                                 
            </tr>
    <%}
        }else{ %>
            <tr>
                <td colspan="7">Gosterilecek veri yok</td>
            </tr>
            <% } %> 
</tbody>

内容的提问来源于stack exchange，提问作者user16617036