2

jQueryのload関数を使用して、外部のhtmlファイルからテンプレートデータを取得しています。ほとんどの場合、データを変数に保存し、後で必要になったときに追加することを好みます。たとえば、ノードのクローンを数回作成したり、他のデータをノードに追加したりする場合があります。要点は、外部ファイルから要素をロードできる必要がありますが、既存のドキュメントには追加できないということです。

私が今していることは簡単です：

var storage = document.createElement('div');
$(storage).load('somehtmlfile.html #sampleTemplateDiv');

しかし、ストレージdiv内から毎回htmlを削除しなければならないのは面倒です。冗長なコンテナdivに追加せずに同様のことを実行でき、htmlファイルのデータをストレージ変数で適切に待機させることができれば便利です。これは可能ですか？

jquery以外のソリューションは完全に受け入れられます。

4

4 に答える 4

1

DOM に追加されていない jQuery オブジェクトにロードできますか? 例えば

var data = $( '<div id="loaded-content" />' ).load( url );

後で使用したい場合：

$( '#my-container' ).html( data.html() );
于 2015-10-21T11:08:32.217 に答える
1

私の解決策は、.load の代わりに .ajax を使用し、一時的にデータをストレージ div に保存し、それを抽出して要素を返すことでした。これを外部関数内でも使用しているため、これを同期呼び出しにするのが適切でした...残念ながら、そうしないと要素を適切に返すことができません。

var ret = null;
$.ajax({
    url: url,
    async: false,
    success: function(data) {
        var storage = document.createElement('div');
        storage.innerHTML = data;
        var template = $(storage).find('#' + id);
        if(template.length > 0) ret = template[0];
    }
});
return ret;
于 2012-07-23T04:19:01.320 に答える
0

これを行う 1 つの方法は、次のように、データを含む JSON オブジェクトをロードすることです
(URL パラメータを読み取り、JSON オブジェクトを出力するサーバー スクリプト ファイルへの URL を指すこともできます)。

例：

//JQUERY:
$.ajax({
  method: "GET",
  dataType: "json",
  url: "path/to/template.json",
  success: function(data) {
    var storage = data.template.html;
    // do something here
  }
});

//JSON FILE:
{
  "template":
  {
    "html":"<div ...></div>",
    "some_var":"some_value"
  }
}

別の方法として、パラメーターを指定して HTML ファイルをロードすることもできます。例: URL を次のように変更するurl: "path/to/my_template.html?id=some_div"か、パラメーターを含む URL で load() を使用します。

次に、各テンプレート ファイルにスクリプトを挿入して、変数を読み取り、要求された要素でドキュメントを書き換えます。

コード：

//query.js
function getQueryString() {
  var q = {}
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0; i<vars.length; i++) {
    var pair = vars[i].split("=");
    q[pair[0]]=pair[1];
  }
  return q;
}
  $(document).ready(function() {
    var $q = getQueryString();
    if ($q.id) {
      document.write($($q.id).html());
    }
  });

//template html files
//head section
<script type="text/javascript" src="query.js"></script>

私はこれをテストしていませんが、うまくいくはずだと思います...

そのスクリプトを各テンプレート ファイルに入れる必要があります。

于 2012-07-23T03:30:13.080 に答える
0

私の解決策は、準備が整ったドキュメントに .load を追加することでした。要素を必要とせずに php 関数スクリプトをロードします。

$( document ).ready(function() {
    // code
}).load('url/to/file.php');

お役に立てれば！

于 2019-01-15T00:57:36.553 に答える