Обновление содержимого блока HTML с помощью ajax

Question

У меня есть основной файл index.html и вы хотите обновить только определенный блок этого шаблона с помощью ajax.

Как, я уже использую swig на стороне сервера, я решил использовать это и на моей стороне клиента.

У меня есть нижний вызов ajax и на успех Я хочу обновить блок HTML.

$(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 фрагмент 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 
     }); 
    }); 
}); 

На стороне сервера я использую res.render для визуализации HTML, но я не мог найти способ, чтобы обновить только определенный раздел шаблона через ajax & с использованием шаблонов шаблонов swig

Answer 1

Вы можете удалить существующий контент, а затем повторно выполнить рендеринг с помощью jQuery в обратном вызове jQuery AJAX. Что-то вроде ..

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

с учетом <p> идентификатор ProductName:

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

Я не знаю, как вы делаете изменение тега {% for product in products %}, но я предлагаю вам посмотреть генерируемый html и повторно отобразить содержимое.