Daten laden nach Ajax-Anfrage in einer Vorlage

Question

Ich rendere eine Seite mit den Daten, die ejs zusammenstellt. Wenn der Benutzer eine Senden-Schaltfläche drückt, sollte ein Abschnitt (thirdRow) der Seite mit den neuen Daten aktualisiert werden, die übermittelt wurden, sowie die alten Daten. Ich habe die neuen Daten in der Datenbank, ich möchte die thirdRow aktualisieren, die alle Bewertungen zeigt.

im Grunde ist mein Problem die success Methode in der $.ajax. Ich könnte alle Daten dort bekommen, aber es scheint komisch, alles in HTML Strings zu schreiben. Es sollte einen besseren Weg geben.

sah ich eine Methode, wo ich die .thirdRow in eine Vorlage setzen könnte und beinhalte, dass in die Haupt EJS Seite und auch in meine statischen öffentlichen Ordner abgelegt und so etwas wie new EJS({url : 'public/thirdRow.ejs' }).update('.thirdRow', data); in diesem Fall zu tun ist die data im letzten Code-Schnipsel die zurückgegebenen Daten vom Erfolgsrückruf im AJAX? Wie bekomme ich Zugriff auf die EJS Es gibt viele Links für EJS können Sie mir zeigen, wie Sie die EJS

Ich weiß nicht, ob dies die richtige Methode ist. Wie würdest du es machen? Ich habe eine Seite, die im Wesentlichen aus allen zurückgegebenen Daten besteht und ich möchte auf eine Schaltfläche klicken und nur einen Abschnitt haben die neuen Daten.

Ein Abschnitt innerhalb 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--> 

innerhalb Clientskript

$(".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) 
      } 
     })   
    } 
}) 

ich EJS nie auf der Client-Seite verwendet. Allways verwendete mit ausdrücklichen

Answer 1

Hier ist ein Beispiel für die Verwendung EJS Client-Seite https://github.com/tj/ejs/blob/master/examples/client.html