Javascript res.render（）函数呈现ejs页面不会刷新UI，但会调用ejs页面

我有一个资源列表，需要根据位置进行筛选。我有一个表单要过滤，点击一个按钮，数据就会根据位置过滤。我有一个AJAX请求，它向/filterresources发送一个post请求，与该条件匹配的数据也从数据库中获取，resourcefilter.ejs使用res.render呈现，如下所示：

resourcefilter.js：

    router.post('/filterresources',function(req,res,next){
        var category = req.body.category;
        User.find({_id: {$ne: req.user._id}},(err,user) => {
            if(err) throw err;
            if(user)
            {
                db.findAll(Resource,{category:category})
                    .then(function(data){
                        res.render('resourcefilter',{title:"Steel Smiling",user:req.user,header:true,navbar:true,resources:data});
                    })
                    .catch(function(err){
                        next(err);
                    });
            }
            else {
                throw(err);
            }
        });


    });

The problem here is, as the records are fetched the UI doesn't get updated even when new ejs page is called. It still retains the previous page UI. But any console.log() statements in the new ejs page gets displayed.

resourcefilter.ejs：此文件中的所有控制台语句都会打印出来，不会出现任何问题，但UI不会刷新。非常感谢您的帮助

<% layout('layout/layout') %>


<div class="container user-form py-5">
    <br>
    <%if(user.role == 'Administrator'){ console.log(user.role);%>
    <a href="/resourceupload" class="btn btn-outline-primary" style="float: right" ><span>Create Resource</span></a>
    <%}%>
    </br>
    <span class="site-logo my-3">Our Resources</span>
    <div class="col-12 col-lg-4 offset-lg-2" style="margin-left: 33%">
        <form id="filter-resources" class="mt-5">
            <div>
                <select class="custom-select" name="category" id="category">
                    <option selected>Select a location:</option>
                    <option value="Pittsburgh">Pittsburgh</option>
                    <option value="Allegheny County">Allegheny County</option>
                    <option value="Pennsylvania">Pennsylvania</option>
                    <option value="Outside Pennsylvania">Outside Pennsylvania</option>
                </select>
                <input class="filter" name="filter-resources" type="submit" value="Filter">
            </div>
        </form>
    </div>
    </form>

    <div class="container" style="margin-top: 2%;">

        <div class="row">
            <% for(var i=0;i<resources.length;i++){ console.log("Hello"+resources.length); %>
            <div class="col-xs-12 col-sm-6 col-md-4">

                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">

                    <div class="mainflip">

                        <div class="frontside">

                            <div class="card-custom">
                                <% console.log("Image"+resources[i].image);%>
                                <div class="card-body text-center">
                                    <img src="<%= resources[i].image %>" alt="" class="img-resources">
                                    <div class="card-title"><b><%= resources[i].name%></b></div>
                                    <div id="greetings" class="card-title"><textarea readonly class="resourceDesc"><%= resources[i].description%></textarea></div>
                                    <a href ="#"  class="card-title"></a>
                                    <a href = <%= resources[i].website%> id="singlebutton" name="singlebutton" class="btn btn-primary">
                                        Read More!</a>

                                    <br></br>         </div>
                            </div>
                            <br></br>
                        </div>



                    </div>

                </div>
            </div>


            <% } %>

        </div>
    </div>
</div>

调用/filterresources的AJAX函数：

function filter_resources(e) {
    e.preventDefault();

    var category = $('#category :selected').text();
    console.log(category);
    const button = this.children[this.children.length - 1];

    //Form Handling with ajax

    $.ajax({

        url: '/filterresources',
        type: 'post',
        data: {category: category},
        dataType: 'json',

    });

    function refreshDiv() {     
        document.getElementById("getelebyid").innerHTML = "Some <strong>HTML</strong> <em>string</em>" ;
    }

}

---

如果您的服务器没有任何错误，您可以使用前端解决：

$.ajax({

        url: '/filterresources',
        type: 'post',
        data: {category: category},
        dataType: 'json',

    }).then(() => location.reload());

---

这将在请求完成时刷新您的页面。

如果您的服务器没有任何错误，您可以使用前端解决：

$.ajax({

        url: '/filterresources',
        type: 'post',
        data: {category: category},
        dataType: 'json',

    }).then(() => location.reload());

---

这将在请求完成时刷新页面。

您的ejs、js和html代码是正确的，问题是您的AJAX函数不刷新页面内容，它只检索内容。有两种解决方案：要么在EJS中，从render改为send，然后在AJAX回调中，对某些元素使用innerHTML返回的值，要么执行表单提交，而不是jquery post。表单提交将导致页面重新加载。

您的ejs、js和html代码是正确的，问题是AJAX函数没有刷新页面内容，它只检索内容。有两种解决方案：要么在EJS中，从render改为send，然后在AJAX回调中，对某些元素使用innerHTML返回的值，要么执行表单提交，而不是jquery post。表单提交将导致页面重新加载。

location.reload在此上下文中不起作用，因为需要将筛选的数据传递到页面。因此，我没有使用res.render，而是按照建议使用res.send。请查找以下代码：

filterresources.js

router.post('/filterresources',function(req,res,next){
    var category = req.body.category;
    User.find({_id: {$ne: req.user._id}},(err,user) => {
        if(err) throw err;
        if(user)
        {
            var user = req.user._id;
            console.log(user);
            db.findAll(Resource,{category:category})
                .then(function(data){
                    res.send({msg: data, success: true,user: user });
                })
                .catch(function(err){
                    next(err);
                });
        }
        else {
            throw(err);
        }

    });
});

AJAX功能：

function filter_resources(e) {
    e.preventDefault();

    var category = $('#category :selected').text();
    console.log(category);
    const button = this.children[this.children.length - 1];

    //Form Handling with ajax

    $.ajax({
        url: '/filterresources',
        type: 'post',
        data: {category: category},
        dataType: 'json',
        success: function (response) {
            if (!response.success) {
                window.alert(response.msg);
            }
            if (response.success) {
                var resource = response.msg;
                var userInfo = response.user;
                $('#resfilter').html(""); // reset the contents in the div
                var html = `<div class="row">`;
                for(var i=0;i<resource.length;i++) {
                    html += `<div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                                <div class="mainflip"> <div class="frontside"> <div class="card-custom">
                                <div class="card-body text-center">`;
                    html += `<img src="${resource[i].image}" alt="Mental Health Resource" class="img-resources">`;
                    html += `<div class="card-title"><b>${resource[i].name}</b></div>`;
                    html += `<div id="greetings" class="card-title"><textarea readonly class="resourceDesc">${resource[i].description}</textarea></div>`;
                    html += `<a href ="#"  class="card-title"></a>`;
                    html += `<a href = ${resource[i].website} id="singlebutton" name="singlebutton" class="btn btn-primary">Read More!</a>`;
                    html += `<br>`;
                    html += `</br></div></div><br></br></div></div></div></div>`;
                }
                    html += `</div></div></div></div>`;
                    }
                    document.querySelector('#resfilter').innerHTML = html; // add the html content to the div which was earlier reset
                }
                })
}

---

location.reload在此上下文中不起作用，因为需要将筛选的数据传递到页面。因此，我没有使用res.render，而是按照建议使用res.send。请查找以下代码：

filterresources.js

router.post('/filterresources',function(req,res,next){
    var category = req.body.category;
    User.find({_id: {$ne: req.user._id}},(err,user) => {
        if(err) throw err;
        if(user)
        {
            var user = req.user._id;
            console.log(user);
            db.findAll(Resource,{category:category})
                .then(function(data){
                    res.send({msg: data, success: true,user: user });
                })
                .catch(function(err){
                    next(err);
                });
        }
        else {
            throw(err);
        }

    });
});

AJAX功能：

function filter_resources(e) {
    e.preventDefault();

    var category = $('#category :selected').text();
    console.log(category);
    const button = this.children[this.children.length - 1];

    //Form Handling with ajax

    $.ajax({
        url: '/filterresources',
        type: 'post',
        data: {category: category},
        dataType: 'json',
        success: function (response) {
            if (!response.success) {
                window.alert(response.msg);
            }
            if (response.success) {
                var resource = response.msg;
                var userInfo = response.user;
                $('#resfilter').html(""); // reset the contents in the div
                var html = `<div class="row">`;
                for(var i=0;i<resource.length;i++) {
                    html += `<div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
                                <div class="mainflip"> <div class="frontside"> <div class="card-custom">
                                <div class="card-body text-center">`;
                    html += `<img src="${resource[i].image}" alt="Mental Health Resource" class="img-resources">`;
                    html += `<div class="card-title"><b>${resource[i].name}</b></div>`;
                    html += `<div id="greetings" class="card-title"><textarea readonly class="resourceDesc">${resource[i].description}</textarea></div>`;
                    html += `<a href ="#"  class="card-title"></a>`;
                    html += `<a href = ${resource[i].website} id="singlebutton" name="singlebutton" class="btn btn-primary">Read More!</a>`;
                    html += `<br>`;
                    html += `</br></div></div><br></br></div></div></div></div>`;
                }
                    html += `</div></div></div></div>`;
                    }
                    document.querySelector('#resfilter').innerHTML = html; // add the html content to the div which was earlier reset
                }
                })
}

---

查看您的表单，我没有看到对/filterresources URL调用操作，也没有方法。您是否在一个单独的AJAX函数中发送请求？是的，使用单独的AJAX函数调用/filter资源。您可以发布AJAX函数吗？我已经在上面添加了AJAX函数查看您的表单，我没有看到对/filterresources URL调用任何操作，也没有方法。您是否在单独的AJAX函数中发送请求？是的，使用单独的AJAX函数调用/filter资源。您可以发布AJAX函数吗？我在上面添加了AJAX函数