所以我有这个表单,用户输入字段的某些值,并根据用户输入我正在执行某些文件的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:
<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;
结果是jsp:
<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;
答案 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);
}