Question

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

我现在正在做的很简单：

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

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

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

Answer 1

您可以将其加载到未附加到DOM的jQuery对象中吗？ e.g。

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

稍后当您想要使用它时：

$( '#my-container' ).html( data.html() );

Answer 2

你可以这样做的一种方法是加载一个包含数据的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: "path/to/my_template.html?id=some_div"或使用带有参数的网址的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>

我没有对此进行过测试，但我认为它应该可行...

您需要将该脚本放在每个模板文件中。

Answer 3

我的解决方案是使用.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;

Answer 4

我的解决方案是将.load附加到准备好的文档中。无需元素即可加载php功能脚本。

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

希望这会有所帮助！

jQuery加载而不附加到元素

4 个答案: