ajax请求成功后打开新的tab
程序员文章站
2024-01-24 09:47:46
...
需求
ajax 项服务端发起请求,比如“导出sql查询结果”,成功响应后,打开新tab到【查询结果下载列表页】。
实现
1. 前端
function exportQueryRes(source) {
bootbox.confirm("你确定要导出数据么?", function (result) {
if (result) {
$.ajax({
url: '${basePath}/dm/query/executeSql',
type: 'post',
data: {
。。。
},
dataType: 'json',
success: function (response) {
var url = "${basePath}/dm/exportFileLog/listPage";
MainTab.createTab("exportFileLog_listPage","下载页", url);
},
error: function (response) {
disLoad();
bootbox.alert("请求异常!");
}
});
}
});
}
主要代码
var url = "${basePath}/dm/exportFileLog/listPage";
MainTab.createTab("exportFileLog_listPage","下载页", url);
/**
* 主框架TAB操作类
*
**/
var MainTab = {
/**
*创建TAB
*id:TAB的标识
*label:TAB显示名称
*url:TAB触发的URL
**/
createTab: function (id, label, url) {
if ($("#framework_body").length <= 0) {
window.parent.MainTab.createTab(id, label, url);
} else {
var $el_lis = $("#main-tabs ul li");
var TABNUM = 10;
if ($el_lis.length < TABNUM) {
var li_id = "li_" + id;
var ifm_id = "ifm_" + id;
if ($("#" + li_id).length <= 0) {
var tabTemplate = "<li id=\"" + li_id + "\"><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close float-left'></span></li>";
var li = $(tabTemplate.replace(/#\{href\}/g, "#" + ifm_id).replace(/#\{label\}/g, label));
$('#main-tabs').find(".ui-tabs-nav").append(li);
var ifm_html = "<div class=\"tab-iframe-div\" id=\"" + ifm_id + "\" >" +
"<iframe name=\"" + ifm_id + "\" class=\"tab-iframe\" src=\"" + url + "\" width=\"100%\" frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"yes\" allowtransparency=\"yes\" ></iframe>" +
"</div>";
//"<div id='"+id+"'><p>"+tabContentHtml+"</p></div>";
$('#main-tabs').append(ifm_html);
$('#main-tabs').tabs("refresh");
refreshMainIframe();
}
var $lis = $("#main-tabs ul li");
var index = 0;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.attr("id") == li_id) {
index = i;
break;
}
}
if (id == 'home') {
$("#" + li_id).find(".ui-tabs-anchor").text(label);
$("#" + ifm_id).attr("scr", url);
}
$('#main-tabs').tabs("option", "active", index);
} else {
Notify('最多打开' + TABNUM + '个标签页!', 'top-right', '5000', 'warning', 'fa-warning', true);
}
}
bindTabContextmenu();
},
/**
*刷新指定的tab
*label 将要跳转并刷新的TAB
**/
RefreshTabBy: function (id, label, url) {
window.parent.MainTab.createTab(id, label, url);
//重新选中
var $iframe = window.parent.MainTab.MainIframe(id);
var src = $iframe.attr("src");
$iframe.prop("src", url);
$iframe.reload();
}
,
/**
*获取父类的Iframe
**/
MainIframe: function (id) {
var ifm_id = "ifm_" + id;
var $iframe = $("#" + ifm_id).find("iframe");
return $iframe;
}
,
/**
*关闭当前的TAB
**/
closeTab: function () {
if ($("#framework_body").length <= 0) {
window.parent.MainTab.closeTab();
} else {
var $lis = $("#main-tabs li");
var $thisli;
var index = 0;
var length = $lis.length;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.attr("aria-selected") == "true") {
$thisli = $li;
index = i;
break;
}
}
var panelId = $thisli.remove().attr("aria-controls");
$("#" + panelId).remove();
$('#main-tabs').tabs("refresh");
}
}
,
/**
*关闭当前TAB,并跳转到另一个TAB
*gotoLabel 将要跳转的TAB名称
**/
closeTabAndGoto: function (gotoLabel) {
if ($("#framework_body").length <= 0) {
window.parent.MainTab.closeTabAndGoto(gotoLabel);
} else {
var $lis = $("#main-tabs li");
var $thisli;
var index = 0;
var length = $lis.length;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.attr("aria-selected") == "true") {
$thisli = $li;
index = i;
break;
}
}
var panelId = $thisli.remove().attr("aria-controls");
$("#" + panelId).remove();
$('#main-tabs').tabs("refresh");
//重新选中
var $lis = $("#main-tabs li");
var $thisli;
var index = 0;
var length = $lis.length;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.find("a").text() == gotoLabel) {
$thisli = $li;
index = i;
break;
}
}
$('#main-tabs').tabs("option", "active", index);
}
}
,
/**
*关闭当前TAB,并跳转到新TAB进行刷新
*refreshLabel 将要跳转并刷新的TAB
**/
closeTabAndRefresh: function (refreshLabel) {
if ($("#framework_body").length <= 0) {
window.parent.MainTab.closeTabAndRefresh(refreshLabel);
} else {
var $lis = $("#main-tabs li");
var $thisli;
var index = 0;
var length = $lis.length;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.attr("aria-selected") == "true") {
$thisli = $li;
index = i;
break;
}
}
var panelId = $thisli.remove().attr("aria-controls");
$("#" + panelId).remove();
$('#main-tabs').tabs("refresh");
//重新选中
var $lis = $("#main-tabs li");
var $thisli;
var index = 0;
var length = $lis.length;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.find("a").text() == refreshLabel) {
$thisli = $li;
index = i;
break;
}
}
$('#main-tabs').tabs("option", "active", index);
var id = $thisli.attr("id").split("_")[1];
var ifm_id = "ifm_" + id;
var $iframe = $("#" + ifm_id).find("iframe");
var src = $iframe.attr("src");
$iframe.prop("src", src);
$iframe.reload();
}
}
,
/**
*只刷指定的TAB
*refreshLabel 将要刷新的TAB
**/
refreshTab: function (refreshLabel) {
if ($("#framework_body").length <= 0) {
window.parent.MainTab.refreshTab(refreshLabel);
} else {
var $lis = $("#main-tabs li");
var $thisli;
var index = 0;
var length = $lis.length;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
if ($li.find("a").text() == refreshLabel) {
$thisli = $li;
index = i;
break;
}
}
var id = $thisli.attr("id").split("_")[1];
var ifm_id = "ifm_" + id;
var $iframe = $("#" + ifm_id).find("iframe");
try {
eval($iframe.attr("name") + '.dataGridRefresh()');
} catch (e) {
var src = $iframe.attr("src");
$iframe.attr("src", "");
$iframe.attr("src", src);
}
}
}
}
2. 后端
@RequestMapping("executeSql")
@ResponseBody
public Object executeSql(String sql, HttpServletRequest request, HttpServletResponse httpServletResponse) throws Exception{
// 执行下载
MyThread thread = new MyThread(exportFileLogPo);
thread.start();
return success("下载计划已提交,等待执行");
}
上一篇: 单例模式的一点小疑问
推荐阅读