显示包含来自控制台输出

时间:2017-05-31 06:11:31

标签: html ajax spring-boot popup

所以我有这个表单,用户输入字段的某些值,并根据用户输入我正在执行某些文件的scp和ftp。由于此过程大约需要2-3分钟,因此结果页面需要花费大量时间来加载。

我想要做的是在用户点击提交后打开一个弹出窗口,并在该弹出窗口中显示控制台输出的内容,并在完全加载后显示结果页面。控制台输出有一些有用的信息,用户可以看到这些信息来检查进度,这也将使Web应用程序更具响应性。

我该如何解决这个问题?

这是我的控制器:

@RequestMapping(value="/pmruploadform", method=RequestMethod.GET)
public String pmrUploadForm()
{
    return "uploadpage";
}

@RequestMapping(value="/pmrupload", method=RequestMethod.POST)
public String pmrUpload(@RequestParam("tool") String tool, @RequestParam("data") String data, @RequestParam("pmrid") String pmrid, @RequestParam("issue") String issue, @RequestParam("envt") String envt, @RequestParam("emailid") String emailid, ModelMap model) throws IOException
{

    Pmr pmr = new Pmr();
    pmr.setPmrId(pmrid);
    pmr.setTool(tool);
    pmr.setData(data);
    pmr.setIssue(issue);
    pmr.setHostenv(envt);

    String host = null;
    List<String> hosts = new ArrayList<String>();
    if(pmr.getTool().equals("udeploy"))
    {
        switch(pmr.getHostenv())
        {
            case("dev"):
                host = udHostConfig.getDev();
                hosts.add(host);
                break;
            case("stage"):
                hosts = udHostConfig.getStage();
                break;
            case("prod"):
                hosts = udHostConfig.getProd();
                break;
        }
    }

    if(pmr.getTool().equals("urelease"))
    {
        switch(pmr.getHostenv())
        {
            case("dev"):
                host = urHostConfig.getDev();
                hosts.add(host);
                break;
            case("stage"):
                hosts = urHostConfig.getStage();
                break;
            case("prod"):
                hosts = urHostConfig.getProd();
                break;
        }
    }
    System.out.println(pmrBaseDir);
    PmrUploadService.uploadService(hosts,pmrid,pmrBaseDir,emailid,tool);//This is the call that takes 2-3 mins. to execute and where the console output is printed
    pmrRepository.insert(pmr);

    int i,j,k;
    char[] pmrc1=new char[5];
    char[] pmrc2=new char[5];
    char[] pmrc3=new char[5];

    for(i=0;i<5;i++)
        pmrc1[i]=pmrid.charAt(i);
    i++;
    for(j=0;i<9;i++,j++)
        pmrc2[j]=pmrid.charAt(i);
    i++;
    for(k=0;i<13;i++,k++)
        pmrc3[k]=pmrid.charAt(i);

    String pmr1=new String(pmrc1);
    String pmr2=new String(pmrc2);
    String pmr3=new String(pmrc3);

    model.addAttribute("pmrlink",pmrlink);
    model.addAttribute("tool", tool);
    model.addAttribute("data", data);
    model.addAttribute("pmrid", pmrid);
    model.addAttribute("issue", issue);
    return "resultpage";

}

这是上传页面jsp:

&#13;
&#13;
<div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Upload Data</h1>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Enter File Details
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <form role="form" action="pmrupload.html" method="POST" name="myForm">
                                            <div class="form-group">
                                                <label>Enter PMR Number</label>
                                                <input class="form-control" name="pmrid">
                                                <p class="help-block">Format = XXXXX.YYY.ZZZ</p>
                                            </div>
                                            <div class="form-group">
                                                <label>Select Tool</label>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="tool" value="udeploy">uDeploy
                                                    </label>
                                                </div>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="tool" value="urelease">uRelease
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>Select Data</label>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="data" value="log">Logs
                                                    </label>
                                                    
                                                </div>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="data" value="thread dump">Thread dump
                                                    </label>
                                                </div>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="data" value="diagnostics">Diagnostics
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>Select Environment</label>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="envt" value="dev">Dev
                                                    </label>
                                                </div>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="envt" value="stage">Stage
                                                    </label>
                                                </div>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="envt" value="prod">Prod
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                            	<label>Enter Email ID</label>
                                                <input class="form-control" name="emailid">
                                            </div>
                                            <div class="form-group">
                                                <label>Issue</label>
                                                <input class="form-control" name="issue">
                                            </div>
                                            <button type="submit" class="btn btn-default">Submit</button>
                                        </form>
                                    </div>
                                </div>
                                <!-- /.row (nested) -->
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
            </div>
&#13;
&#13;
&#13;

结果是jsp:

&#13;
&#13;
<div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Result</h1>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-12">
                    	<p>Success! File Uploaded Successfully</p>
                    	<p>Tool: ${tool}</p>                     
					    <p>Data: ${data}</p>
					    <p>PMR id: ${pmrid}</p>
					    <p>Issue: ${issue}</p>
					    <!-- /.panel -->
                    	<a href="${pmrlink}">Click here to see uploaded PMR</a>
                    	
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
            </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

试试这段代码:

var output ='here is the output that you got';
onload = function myFunction() {
   var myform = window.open("", "MsgWindow", "width=400,height=300");
   var div = document.createElement('div');
   div.innerHTML = "<h1>Title</h1><div>this is a content from "+output+"</div>";
   myform.document.body.append(div);
}