以及ajax的交互网页写法,laytpl模板——怎么使用ajax与数据交互(示例代码)

第一次在项目中用laytpl模板，下面是一些使用过程中的探索，希望对小伙伴们有所帮助。

注：第一次使用这个模板的小伙伴建议先去看看官网

　　　　　　　//模板里面的数据前面都要加上d，没有为什么，语法就这样

{{d.obj[i].fullName}}

¥{{d.obj[i].price}}

• {{#if(d.obj[i].isFavorite == 1){ }}　　//if else也是js的写法，也要写在{{# }}里面
• {{# }else{ }}　　//else也要写在{{# }}
• {{# } }}　　//结束括号也要写在{{# }}
• 

立即购买

{{# } }}//for循环结束括号也要单独写在这里面{{# }}

上面模板的内容就是下图红色框的部分，使用了这个模板以后，就不用再拼字符串了。

下面总结了2种写法：

第一种是模板里面已经写了循环(比如我上面的模板就已经写了循环)，ajax请求里面就不需要在写循环了，如下图：

var gettpl = document.getElementById(\'productList-shop-main1\').innerHTML;

$.ajax({

url:"orderController.do?findTdCodeNews",

data: {"billCompanyName":billCompanyName

},

type:"post",

dataType:"json",

success:function(e) {if (!e.success) {

alert(e.msg);return false;

}

laytpl(gettpl).render(e,function(html){　　//这里的gettp1就是获取到模板内容的id

document.getElementById(\'item3-main\').innerHTML =html;　　//把获取到的模板内容添加到id为item3-main的容器里面

});

}

});

}

第二种是，模板里面没有写循环，那么就要在ajax请求里面写循环，如下图：

var gettpl = document.getElementById(\'productList-shop-main1\').innerHTML;

$.ajax({

url:"orderController.do?findTdCodeNews",

data: {"billCompanyName":billCompanyName

},

type:"post",

dataType:"json",

success:function(e) {if (!e.success) {

alert(e.msg);return false;

}

//xxx代表返回结果集的属性名称

for(var i = 0; i < e.xxx.length; i++){

laytpl(gettpl).render(xxx[i],function(html){

document.getElementById(\'item3-main\').innerHTML = html;

});

}

}

});

}