ajax请求成功后打开新的tab

需求

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("下载计划已提交，等待执行");
    }