ホームページ > 記事 > ウェブフロントエンド > JQuery テンプレート プラグイン jquery.tmpl 動的 Ajax extension_jquery
JQuery テンプレート プラグイン jquery.tmpl 動的 Ajax extension_jquery
- WBOYオリジナル
- 2016-05-16 17:59:381058ブラウズ
このプラグインは、前の記事 JQuery テンプレート プラグイン-jquery.tmpl で紹介されました。場合によっては、動的 Ajax を使用してテンプレートやデータをロードしたり、URL パラメーターやその他の情報に基づいてさまざまなテンプレートやデータをロードしたりする必要があります。私のプロジェクトの 1 つにこの要件があるため、それを jquery ツール関数として特別に作成し、ローカル データと Ajax データ読み込みテンプレートとデータ メソッドを追加しました。
パラメータの説明:
Tmpl: function(template, data, fun)
1: template:
1): url: は ajax の読み込み URL です。ajax の場合のみそして、remote=true の場合にのみロードされます。
2): データ: ajax のロードパラメータ
3) templateSelector: ローカルテンプレートセレクターであり、remote= false の場合にのみ使用されます
4) リモート: true は ajax、false はローカルデータ、
5) キャッシュ: テンプレートをキャッシュするかどうかを示します。
2: data:
1): url: は、ajax の読み込み URL です。ajax は、remote= true の場合にのみ読み込まれます。
2): data: ajax のロードパラメータ
3) templateData: ローカルデータであり、remote= false の場合にのみ使用されます
4) リモート: 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.remove) {
fun(te.tmpl(data.templateData), te, data.templateData)
if (!templatecache) {
te.remove(); 🎜>}
return ;
}
var da = te.data("objdata");
if (data.cache && da != null && da != 未定義) {
fun(te.tmpl(da ), te, da);
if (!templatecache) {
te.remove();
}
$. ajax({
type : "GET",
data: data.data,
url: data.url,
dataType: "json",
cache: false,
context : { テンプレート: 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);
}
$.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" %>
<本体>