在我接觸的項目中,通常用到的前后端交互模板引擎是Layui框架,這個框架非常的簡單適用,文檔也介紹得一目了然,以下是我在項目中用到的部分代碼
一、返回實體類型
$(function(){ var id = common.getRequestParam("id"); ajax.reques({ type:"GET", url: "http://localhost:8080/zbxt/a/noap/hytzbxt/PurchaseHyt/details", data:{"id": id}, success : function(result){ console.info(result); layui.laytpl($("#bigs").html()).render({list: [result]}, function(html) { $("#detail_new").html(html); console.info($("#detail_new").html(html)); }); }, error: function() { alert("異步請求失敗!"); } }) }); })
注意:common.getRequestParam("id"); ajax.reques是我封裝了的,前面的文章有介紹,代碼。[result]:這個對象返回的是實體
二、返回集合
$(function () { $(".btn").click(function(){ //if($("#postList").find("option:selected").text() == "職位"){ param={}; param.post = $("#keywords").val(); //} loadList(); }); //function loadList(){ ajax.request({ type : "get", //jquey是不支持post方式跨域的 async:false, url :"http://localhost:8080/zbxt/a/noap/hytzbxt/PurchaseHyt/list", //跨域請求的URL data:{"notice_type_cg":"pub_zb"}, success : function(result){ layui.laytpl($("#big").html()).render({list: result}, function(html) { $("#big_new").html(html); console.info($("#big_new").html(html)); }); }, error: function() { alert("異步請求失敗!"); } }) });
注意:result:返回的是list集合
最后,有些不懂的,多看看官方文檔介紹,地址:https://www.layui.com/doc/