ajax aracılığıyla HTML blok içeriğini güncelleyin

Question

Bir ana index.html dosyam var ve bu şablonun yalnızca belirli bir bloğunu ajax yoluyla güncellemek istiyorum.

Zaten sunucu tarafında swig kullanıyorum. Bunu da istemci tarafında da kullanmaya karar verdim.

Aşağıda ajax çağrısı var ve başarıda bir HTML bloğunu güncellemek istiyorum. Ben HTML işlemek için res.render kullanın ama sadece belirli bir bölümünü güncelleştirmek için bir yol bulamadı Sunucu tarafında index.html

  <div class="col_1_of_3 span_1_of_3"> 
      {% for product in products %} 
       <div class="view view-first"> 
         <a href="{{product.link}}"> 
         <div class="inner_content clearfix"> 
         <div class="product_image"> 
          <img src="{{product.imageSrc}}" class="img-responsive" alt=""/> 
          <div class="product_container"> 
           <div class="cart-left"> 
           <p class="title">{{product.name}}</p> 
           </div> 
           <div class="price">{{product.price}}</div> 
           <div class="clearfix"></div> 
          </div> 
         </div> 
         </div> 
        </a> 
        </div> 
      {% endfor %} 
      </div> 

router

app.get('/SearchShow', function(req, res){ 
    console.log(req.query); 

    var cgid = req.query.cgid; 
    console.log("cgid: " + cgid); 
    category.getProductsAssignedToCategory(cgid, function(productHits){ 
     res.send({ 
      "products" : productHits 
     }); 
    }); 
}); 

ait

$(function(){ 

    $('#category_nav').click(function(e){ 
     e.preventDefault(); 
     var obj = {}; 
     obj.cgid = $(this).attr("href"); 
     $.ajax({ 
      type : 'GET', 
      contentType: 'application/json', 
      dataType : 'json', 
      data: obj, 
      url : '/SearchShow', 
      success : function(data) { 
       console.log(data); 

      }, 
      error : function(){ 
       console.log("error"); 
      } 
     }); 
    }); 
}); 

HTML pasajı şablon şablonunu kullanarak ajax & üzerinden şablon şablonu

Answer 1

Varolan içeriği kaldırabilir ve jQuery AJAX geri çağrısında jQuery'yi kullanarak yeniden oluşturabilirsiniz. Bir şey gibi ..

success : function(data) { 
       $('#productName').empty(); 
       $('#productName').append(data.name); 
      } 

<p> id dikkate alarak ürünAdı geçerli:

<p id="productName" class="title">{{product.name}}</p> 

Sana güncelleştirme etiketi {% for product in products %} nasıl bilmiyorum ama ben görmek önermek oluşturulan html ve içeriği yeniden.