2

我正在使用 jQuery 的加载函数从外部 html 文件中获取模板数据。在大多数情况下，我更喜欢将数据存储在一个变量中，并在以后需要时附加它。例如，我最终可能会多次克隆节点，或向其附加其他数据等。关键是我需要能够从外部文件加载元素，但不能将其附加到现有文档中。

我现在做的很简单：

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

但是每次都必须从存储 div 中删除 html，这很烦人。如果我可以做类似的事情而不必附加到冗余容器 div 并且我可以让来自 html 文件的数据在存储变量中很好地等待，那就太好了。这可能吗？

非 jquery 解决方案是完全可以接受的。

4

4 回答 4

1

我的解决方案是使用 .ajax 而不是 .load 并将数据临时存储在存储 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 回答
1

你能把它加载到一个没有附加到 DOM 的 jQuery 对象中吗？例如

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

您以后想使用它时：

$( '#my-container' ).html( data.html() );
于 2015-10-21T11:08:32.217 回答
0

一种方法是加载包含数据的 JSON 对象，如下所示：（
您还可以将 URL 指向服务器脚本文件，该文件读取 URL 参数并输出 JSON 对象）

例子：

//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"或使用 load() 与带有参数的 URL。

然后在每个模板文件中插入一个脚本来读取变量并用请求的元素重写文档。

代码：

//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 回答