在模板中加载 Ajax 请求后的数据

Question

我用 ejs 放在一起的数据呈现一个页面。当用户按下提交按钮时，页面的一部分 (thirdRow) 应该使用提交的新数据和旧数据刷新。我在数据库中获得了新数据，我想刷新显示所有评论的thirdRow。

基本上我的问题是 $.ajax 中的 success 方法。我可以在那里获取所有数据，但是将所有内容都写在 html 字符串中似乎很奇怪。应该有更好的方法。

我看到了一种方法，我可以将 .thirdRow 放入模板并将其包含到主 EJS 页面中，并将其放入我的静态公用文件夹并执行类似 new EJS({url : 'public/thirdRow.ejs' }).update('.thirdRow', data); 的操作，在这种情况下是 data在最后一个代码中，sn-p 从 AJAX 中的成功回调返回的数据？我如何访问EJS 有很多 ejs 的链接你能告诉我如何包含EJS

我不知道这是否是正确的方法。你会怎么做？我有一个基本上由所有返回数据组成的页面，我想单击一个按钮，并且只有一个部分有新数据。

main.ejs 中的一个部分

    <div class="thirdRow">
        <div class="reviewSection">
            <% if(reviews){%>
            <% reviews.forEach(function(e, i){%>
            <div class="indivReview">
                <div class = "userRow row">
                    <div>
                        <span>user </span>
                        <% if( e.username) {%>
                        <span><%= e.username %></span>
                        <%}else{ %>
                            <span><%=e.user%></span>
                         <% }%>                        
                    </div>

                    <div><%= e.momented %></div>

               </div><!--userRow-->

               <div class = "companyRow row">
                    <div>
                        <span>Experince for</span>
                        <span><%=e.companyName%></span>
                    </div>
                    <div>
                        <span> industry</span>
                        <span>online retail</span>

                    </div>
               </div> <!--companyRow -->
               <div class="voteRow row">
                    <div>
                        Vote
                    </div>
                    <div><%= e.vote%></div>
               </div>
               <div class="reviewRow row">
                    <div>Review</div>
                    <div class = "displayReview">
                    <% e.reviewText.split("\n").forEach(function(e){ %>
                            <%= e %><br>
                    <%})%>
                    </div>
               </div>
               <div class="statementRow ">
                // make a div for each object
                   <% e.statements.forEach(function(obj){%>
                   <div class="indivStatement">
                        <% var arr = []%>
                        <%for(var prop in obj) {%>
                            <% if(prop !== "name"){ %>
                                <% if(prop == "question"){%>
                                    <% arr[0] = obj[prop] %>
                                <%} %>
                                <% if (prop == "result"){%>
                                   <% arr[1] = obj[prop] %>
                                <%}%> 
                                <% console.log(arr) %>



                            <%} %>


                        <%}%>
                        <div class = "question"><%= arr[0]%></div> 
                        <div class = "bar" data-result ="<%= arr[1]%>"><%= arr[1]%></div> 
                    </div>
                   <%})%>
               </div>
                <div> <span></span>
                <span><%=e.companyName%></span></div>
                <div><%= e.momented %></div>

            </div>
            <%})%>

            <%}%>          
        </div> <!--reviewSection-->

    </div> <!--thirdRow-->

在客户端脚本内

$(".submitButton").on("click",function(){
    console.log(datum)
    var empty;
    if(datum.reviewText == "" && Object.keys(datum.statements) == 0 && datum.vote == null){
        empty = true;
    }else{
        empty = false;
    }
    console.log("empty : " , empty)
    scrollFunction(".thirdRow", ".submitButton, .shareButtonSection")
    var data = datum;
    if(!empty){
        $.ajax({
            type : "POST",
            data : JSON.stringify(data),
            contentType : "application/json",
            url : "http://localhost:4000/submitreview",
            success : function(data){
                console.log("success")
                $(".thirdRow").fadeOut(800, function(){
                    console.log("this", $(this))
                    $(this).html(data).fadeIn().delay(200)
                })
                console.log(data)
            }
        })           
    }
})

我从未在客户端使用过 EJS。总是与 express 一起使用

Answer 1

这里是一个使用 EJS 客户端的例子 https://github.com/tj/ejs/blob/master/examples/client.html