通过 ajax 更新 HTML 块内容答案

【问题标题】：Update HTML block content via ajax通过 ajax 更新 HTML 块内容
【发布时间】：2016-04-04 10:24:21
【问题描述】：

我有一个主要的 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 sn-p

           <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 模板引擎仅更新模板的特定部分的方法

【问题讨论】：

除了投反对票，还请添加评论为什么你投反对票。因此，可以相应地更新该问题。

标签： javascript ajax express swig-template

【解决方案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并重新渲染内容。

【讨论】：