[英]Update HTML block content via ajax
我有一个主要的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 模板引擎仅更新模板特定部分的方法
您可以删除现有内容,然后在 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 并重新呈现内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.