Question

我们不确定我们正在寻找的是否可以这样做。我们使用JS生成HTML结构，我们希望在我们生成的div中加载外部HTML文件。到目前为止，我们已使用此代码https://jsfiddle.net/tanaan/feouj1rq/1/，但我们得到undefined

我们也试过

var htmlFile1 = file_get_html( 'file1.html');

我们无法使其发挥作用，我们不确定它是否可行，这就是为什么我们想在这里问这个庞大的社区。这个想法基本上是使用我们使用JS生成的类.content在idv中加载外部HTML文件。

欢迎提出任何建议。

非常感谢你

Answer 1

要在div中加载外部文件，您可以使用：

$( "#idofyourdiv" ).load( "some/html/on/your/server.html" );

但是，只有当该文件实际上在您的服务器而不是另一个域时。

将其加载到变量中使用：

$.get( "some/html/on/your/server.html", function( data ) {
    // the contents is now in the variable data
    alert( data );
});

Answer 2

尝试

$('.content').load('file1.html')

你正在做$('.content').get('file1.html')这是错误的，因为jQuery的.get()实际上是一个AJAX方法，需要第二个参数作为回调函数。请改用$(selector).load()加载本地文件

修改我只是通过你的代码更彻底地阅读，你正在尝试将本地文件内容读入变量;你不能从浏览器那样做。 .load()实际上是AJAX调用的辅助函数，因此您可以执行以下操作：

$.get("file.html", function(data) { expandables[0].content = data; })

执行expandables[0].content的原因是因为调用是AJAX，因此在将其分配给另一个变量时可能没有准备好内容。这样做将确保expandables即使在初始分配后也能获得内容。

Answer 3

与使用$ .ajax函数的其他答案相比，您可以获得更多选项和更好的错误处理（加载文件时可能会出现错误）：

$.ajax({url: "some/html/on/your/server.html", success: function(result){
    $("#idofyourdiv").html(result);
}, error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
});

在你的代码中，它就在这一点上：

...
var item = $('<div />', {
    class: 'item',
    html: '<div><h2>' + e.title + '</h2></div>' +
        // you do not set the content yet:
        '<div class="content"><p></p></div></div>'
    })
//here
$.ajax({url: "some/html/on/your/server.html", success: function(result){
    item.find('.content:first > *').html(result);
}, error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
});

// the load function would also work instead:
// item.find('.content:first > *').load('file1.html')
...

如何获取外部HTML文件并将其存储在变量中

3 个答案: