Question

我已经构建了一个webapp，在按钮单击时，一个名为via ajax的servlet在上下文路径中的目录中创建html file。

现在，在ajax调用完成后，我需要在div diffReport中打开那个html文件。

这是我写的脚本

$(document).on('click', '#detect', function() {
var url = document.getElementById("url").value;

$(document).ajaxStart(function() {
      $("#loader").show();
});
$(document).ajaxStop(function() {
    $("#loader").hide();
});

$.ajax({
    url: 'diffReport?url='+url,
    success:function(data){
        $.ajax({
            type : 'GET',
            url : data,
            success : function(msg) {
                $('#diffReport').html(msg);

            }

        });
    }
   });
});

我的div

<div id="diffReport" style="width:45.5%; height: 730px;float:right">
            <p>Diff report will load here....</p>
            <span id="loader">please wait..<br><img alt="loading..." src="resources/images/loader.gif"></span>
</div>

这就是我传递html文件创建路径的方式

File reportDir = AutoUtils.createDirectory(contextPath+"/resources/htmlreports/");

DiffGenerator.createHtml(someParams,reportDir.getAbsolutePath());  //this creates file with name 'finalDiff.html'

response.getWriter().write(reportDir.getAbsolutePath()+"/finalDiff.html");  //copy the file path in response.

但ajaxStop后没有加载任何内容。控制台上没有错误。

请建议。

Answer 1

我有一个解决方案。我假设您通过ajax成功获取新创建的html页面的完整URL。例如，我想你新创建的html文件的网址是“http://jsfiddle.net/”，这个页面将通过iframe加载到div中。我为此创建了演示JSFIDDLE ：

HTML：

<div id="iframe_div">
</div>

JS：

//url of newly created html file
var file_src = "http://jsfiddle.net/";

$('<iframe>')                      // Creates the element
.attr('src',file_src) // Sets the src attribute 
.attr('height',500)
.attr('width',500)
.appendTo('#iframe_div');

在服务器创建后打开div内的html文件

1 个答案: