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＆amp; amp;更新模板的特定部分的方法。使用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并重新呈现内容。

通过ajax更新HTML块内容

1 个答案: