通過ajax更新HTML塊內容

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");
            }
        });
    });
});

index.html 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 AJAX 回調中使用 jQuery 重新渲染。 就像是..

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

考慮到<p> id 是productName ：

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

我不知道您如何更新標簽{% for product in products %} ，但我建議您查看生成的 html 並重新呈現內容。