JQuery 템플릿 플러그인 jquery.tmpl 동적 Ajax Extension

이 플러그인은 이전 기사 JQuery 템플릿 플러그인-jquery.tmpl에서 소개되었습니다. 때로는 동적 Ajax를 사용하여 템플릿이나 데이터를 로드하고, URL 매개변수나 기타 정보를 기반으로 다양한 템플릿과 데이터를 로드해야 합니다. 내 프로젝트 중 하나에 이 요구 사항이 있으므로 특별히 jquery 도구 함수로 작성하고 로컬 데이터와 Ajax 데이터 로딩 템플릿 및 데이터 메서드를 추가했습니다.

매개변수 설명:

Tmpl: function(template, data, fun)
1: template:
1): url: ajax의 로딩 URL입니다. ajax는 다음과 같은 경우에만 해당됩니다. Remote=true인 경우에만 로드됩니다.
2): data: ajax에 대한 매개변수 로드
3) templateSelector: 원격 템플릿 선택기이며, remote= false인 경우에만 사용됩니다.
4) Remote: true는 ajax, false는 로컬 데이터,
5) 캐시: 템플릿을 캐시할지 여부를 나타냅니다.
2: data:
1): url:은 ajax의 로딩 URL이고, ajax는 Remote= true인 경우에만 로드됩니다.
2): data: ajax에 대한 매개변수 로드
3) templateData: 로컬 데이터이며, remote= false인 경우에만 사용됩니다.
4) Remote: true는 ajax, false는 로컬 데이터,
5) 캐시: 템플릿을 캐시할지 여부를 나타냅니다.
3: fun은 콜백 함수입니다.
fun(jquery.tmpl object, template script, data)

구체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
; (function($) { 
$.extend({ 
Tmpl_Data : function(te, data, fun, templatecache) { 
data = jQuery.extend({ data: "", url: "", templateData: {}, 원격: true, 캐시: true }, data); 🎜>if (!data.remote) { 
fun(te.tmpl(data.templateData), te, data.templateData) 
if (!templatecache) { 
te.remove(); 🎜>} 
return ; 
} 
var da = te.data("objdata") 
if (data.cache && da != null && da != undefine) fun(te.tmpl(da ), te, da); 
if (!templatecache) { 
te.remove() 
} 
return; ajax({ 
유형: "GET", 
데이터: data.data, 
url: data.url, 
dataType: "json", 
캐시: false, 
컨텍스트 : { 템플릿: te, 데이터 : 데이터 }, 
성공: function(tmpldata) { 
fun(this.template.tmpl(tmpldata), this.template, tmpldata) 
if (data.cache); ) { 
this.template.data("objdata", tmpldata); 
} 
if (!templatecache) { 
this.template.remove(); , 
error: function (e) { 
throw "get data error(" this.data.url "?" this.data.data "):" e 
} 
}); 
}, 
JquerySelecotrCharChange: function(str) { 
return str.replace(".", "\.").replace("#", "\#") 
}, 
Tmpl: function( template, data, fun) { 
template = jQuery.extend({ data: "", url: "", templateSelector: "", 원격: true, 캐시: true }, template) ; 
if (!template.remote) { 
$.Tmpl_Data($(template.templateSelector), data, fun, true) 
return; 
} 
var te = null; 
try { 
te = $("script:[url='" $.JquerySelecotrCharChange(template.url "?" template.data) "']") 
} 
catch(e) { 
} 
if (template.cache && te != null && te.length > 0) { 
$.Tmpl_Data(te, data, fun, template.cache) 
return; 
} 
 $.ajax({ 
type: "GET", 
data: template.data, 
url: template.url, 
dataType: "html", 
cache: false, 
context: { template: template, data: data }, 
error: function(e) { 
throw "get template error(" this.template.url "?" this. template.data "):" e; 
}, 
성공: function(tmpltemplate) { 
var te = $(' ').appendTo(document.body) 
te.attr("url", (this.template.url "?" this.template.data)); Tmpl_Data(te, this.data , fun, this.template.cache) 
} 
}) 
}) 

 
테스트 코드 : 
 프론트 데스크 : 




코드 복사 

코드는 다음과 같습니다

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl3.aspx.cs" Inherits="Tmpl3" %>

<제목>

<본문>

id="test" width="500">
<머리>

<시간 />

测试缓存系统（url）

아이디

이름

성별

操작품

id="Table1" width="500">
<머리>

后台ajax数据：

复代码代码如下:

 
protected void Page_Load(객체 전송자, EventArgs e) 
{ 
if (Request["ajax"] == "1") 
{ 
Response.Clear(); 
Response.ContentType = "애플리케이션/json"; 
System.Text.StringBuilder sb = new System.Text.StringBuilder("["); 
for (int i = 0; i < 20; i ) 
{ 
sb.AppendFormat(@" {{ 
""이름"":""school生{0}"", 
""섹스"":""{1}"", 
""ID"": {0}, 
""클래스"": 
[ 
{{ 
""클래스 이름"":""클래스{0}"", 
""개수"": {2} 
}}, 
{{ 
""클래스 이름"":"" Class2{0}"", 
"" 개수"": {3} 
}} 
] 
}},", i, i % 2 == 0 ? "男" : " 여자", (i 10) / 2, (i 20) / 2); 
} 
sb.Remove(sb.Length - 1, 1); 
sb.Append("]"); 
Response.Write(sb.ToString()); 
Response.Flush(); 
응답.닫기(); 
응답.끝(); 
} 
} 