1. 程式人生 > >十三、$.ajax、模態/非模態框、window.open()、href屬性、submit()等提交請求及優劣及問題解決

十三、$.ajax、模態/非模態框、window.open()、href屬性、submit()等提交請求及優劣及問題解決

題解 字符 upd 管理員 系統管理 ogl menu 縮小 fir

1. $.ajax提交請求進行數據更新,並通過回調進行有效提示

技術分享圖片
$.ajax({
            type: "post",
            url: dispacher,     
            data: {"insurCode" : tmp,
                   "currentPage" : currentpage,
                   "pageDirection" : ‘current‘
                },    
            success: function(data) {
                
if(data == ‘OK‘ && dispacher==‘auditAction.do?action=updateById‘){ alert( ‘審核成功!點擊確定刷新列表‘); seachHeadPage(‘‘);//重新進行查詢更新查詢列表數據顯示 }else{ alert(‘審核失敗,請稍後再試!‘); } }, error: function
(data) { alert("系統錯誤,請稍後再試!"); } }) 更新數據後的JAVA回寫代碼 boolean boo= auditService.updateAuditById(insurCode); if(boo){ response.getWriter().write("OK"); }else{ response.getWriter().write("NO"); } response.getWriter().flush(); response.getWriter().close();
View Code

$.ajax({})優劣:
優勢:提交請求時,可以是實現回調,進而判斷該請求是處理成功還是處理失敗了
劣勢:不支持流文件的回調。例如當你對生成的excle文件進行下載是使用$.ajax({})是無法實現的,除非...使用組合,將在該文的最後進行列舉說明
2、模態提交請求彈出新窗口,且該窗口不關閉是無法對父頁面/其他頁進行操作

技術分享圖片
操作1:父頁面代碼:
//通過模態框提交請求的代碼:
var dispacher==‘auditAction.do?action=updateById‘;
var temp = window.showModalDialog(
    dispacher + "&insurCode=" + tmp + "&currentPage=" + currentpage +"&pageDirection=current",
    window,
    ‘dialogHeight=750px;dialogWidth=1000px;dialogRight=40px;dialogTop=30px;center:yes‘);
//子頁面保存操作成功後刷新該頁面的查詢列表    
if (temp == ‘saveSuccess‘&& dispacher==‘auditAction.do?action=updateById‘) {
            seachHeadPage(‘‘);
}

操作2:
在彈出子頁面中點擊【保存】按鈕,數據保存成功,並向父頁面傳遞子頁面數據保存成功標識‘saveSuccess‘
var isFinished  = "<c:out value=‘${isUpdate}‘/>";
if(isFinished == ‘true‘){
    load();
    alert("審核成功!");
    window.returnValue = ‘saveSuccess‘;
    window.close();
}else if(isFinished != ‘true‘&& isFinished !=""){
    alert("系統保存失敗,請與系統管理員聯系!");
}
子頁面保存數據後的JAVA回寫代碼
boolean isUpdate= auditService.updateAuditById(insurCode);
map.put("isUpdate", isUpdate + "");
return new ModelAndView(this.auditDetail, map);
View Code

模態/非模態框語法:

技術分享圖片
1)window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。 
2)window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。 
使用方法: 
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]) 
參數說明: 
要想對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大為4096個字符。也可以傳遞對象,
sURL--必選參數,類型:字符串。用來指定對話框要顯示的文檔的URL。 
vArguments--可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。 
sFeatures-- 可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。 
a、dialogHeight :對話框高度,不小於100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5以上是px,為方便其見,在定義modal方式的對話框時,用px做單位。 
b、dialogWidth: 對話框寬度。 
c、dialogLeft: 離屏幕左的距離。 
d、dialogTop: 離屏幕上的距離。 
e、center: {yes | no | 1 | 0 }:窗口是否居中,默認yes,但仍可以指定高度和寬度。 
f、help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,默認yes。 
g、resizable: {yes | no | 1 | 0 } 〔IE5+〕:是否可被改變大小。默認no。 
h、status: {yes | no | 1 | 0 } 〔IE5+〕:是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。 
i、scroll:{ yes | no | 1 | 0 | on | off }:指明對話框是否顯示滾動條。默認為yes。 
下面幾個屬性是用在HTA中的,在一般的網頁中一般不使用。 
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印預覽時對話框是否隱藏。默認為no。 
11.edge:{ sunken | raised }:指明對話框的邊框樣式。默認為raised。 
12.unadorned:{ yes | no | 1 | 0 | on | off }:默認為no。
View Code

模態/非模態框優劣:
優勢:可靈活的對彈框進行設置(大小、是否居中、滾動條)等,且能夠傳遞參數給父頁面,非常實用。
功能上的缺點暫時沒有發現,書寫上有點繁雜。

3、window.open()提交請求並新打開一個標簽頁

技術分享圖片
function searchAuditNew(dispacher) {
    window.open(
                dispacher,
                ‘‘,
                ‘height=630,width=810,top=‘
                        + (screen.height - 630)
                        / 2
                        + ‘,left=‘
                        + (screen.width - 810)
                        / 2
                        + ‘,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no,center=yes‘
                );
}    
View Code

window.open()語法:

技術分享圖片
window對象的open()方法:用於打開一個新的瀏覽器窗口或查找一個已命名的窗口
用法1):
window.open("http://www.baidu.com","_blank");
            //默認就是開啟一個新窗口,老窗口稱為父窗口,新窗口稱為子窗口
參數取值:
_blank -- 打開一個新窗體 
_parent -- 在父窗體中打開 
_self -- 在本頁打開,此為默認值 
_top -- 在上層窗體中打開 
_search --同時打開搜索窗口

用法2):
window.open(URL,name,features,replace)
參數取值:
a、URL:一個可選的字符串
聲明了要在新窗口中顯示的文檔的 URL。如果省略了這個參數,或者它的值是空字符串,那麽新窗口就不會顯示任何文檔。
b、NAME:一個可選的字符串
該字符串是一個由逗號分隔的特征列表,其中包括數字、字母和下劃線,該字符聲明了新窗口的名稱。
這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該參數指定了一個已經存在的窗口,那麽 open() 方法就不再創建一個新窗口,而只是返回對指定窗口的引用。在這種情況下,features 將被忽略。
c、features:一個可選的字符串
聲明了新窗口要顯示的標準瀏覽器的特征。如果省略該參數,新窗口將具有所有標準特征
d、replace:一個可選的布爾值。
規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目,還是替換瀏覽歷史中的當前條目。支持下面的值:
true - URL 替換瀏覽歷史中的當前條目。 
false - URL 在瀏覽歷史中創建新的條目。
View Code

window.open()優劣:
優勢:是window本身具有的方法,兼容性強,父子之間數值傳遞操作容易實現(待補充)
缺點:無法實現子頁面不關閉就無法對父頁面操作這樣的功能

4、href屬性

技術分享圖片
1)作為LINK標簽的屬性,指向所引用文件的URL地址
<LINK href="./jsp/css/page_style.css" type="text/css" rel="stylesheet">

2)base標簽為頁面上的所有鏈接規定默認地址或默認目標。
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
    <base href="<%=basePath%>">
</head>

3)a標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面
<a href="<%=path%>/auditAction.do?action=auditInfoView&pageDirection=first&currentPage=<c:out value=‘${currentpage}‘/>" class="a1">首頁</a>
說明:如果該頁面中添加了<base href="<%=basePath%>"> ,那麽該超鏈接中是不需要添加<%=path>/的

4)window.location.href 屬性來訪問(Location 對象是 Window 對象的一個部分)
<input type=‘button‘ name=‘close‘ value=‘返回‘ onclick="javascript:window.location.href=‘input.do?action=inputView‘;" />
說明:
    "window.location.href"、"location.href"是本頁面跳轉
    "parent.location.href"是上一層頁面跳轉
    "top.location.href"是最外層的頁面跳轉
    "window.location.reload()"本頁面重新加載
View Code

herf屬性優劣

優勢:靈活,頁面中的鏈接跳轉通常采用此種方法
劣勢:當傳遞的參數較多時,代碼顯得不美觀,且其提交參數方式為瀏覽器默認的方式(get請求),存在中文時會出現亂碼問題,需要特殊處理window.location.href=dispatcher+"&custName="+encodeURI(custname)+"&isNormal="+encodeURI(isNormal);java.net.URLDecoder.decode(custname, "utf-8").trim();//屬於rt.jar包中類

5、通過Form對象的submit()提交

技術分享圖片
var frm=document.forms(‘tranDataFrom‘);
frm.action=‘hisAction.do?action=doSearch&pageDir=‘+pageDir;
frm.submit();
優劣:方便,無法實現實現回調;
View Code

6、jquery-form.js中的ajaxSubmit()

技術分享圖片
<input type="hidden" id="isNormal" name="isNormal" value="<c:out value="notNormal"/>"/>
var isNormal="notNormal";//導出數是否超範圍標識
$(function(){
    $("#inputFrom").ajaxSubmit(function(data){    
            if(data=="exportHuge"){  
                alert("查詢結果數據量偏大,請縮小查詢範圍!");
            }else if(data=="normal"){
                isNormal="normal";
                $("#isNormal").val(isNormal);
                document.getEleById("inputFrom").submit();
            }
     });       
});
更新數據後的JAVA回寫代碼
if(auditList.size()>=65536&&"notNormal".equals(isNormal)){
    response.getWriter().write("exportHuge");
    response.getWriter().close();
    return null;
}else if("notNormal".equals(isNormal)&&auditList.size()<65536){
    response.getWriter().write("normal");
    response.getWriter().close();
    return null;
}else if ("normal".equals(isNormal)) {
    System.out.println("開始導出excle操作");
}
View Code

優勢:提交請求時,可以是實現回調,進而判斷該請求是處理成功還是處理失敗了
劣勢:不支持流文件的回調。但是可以通過組合觸發請求的方式來實現

以上均是自己的均是自己的理解,可能有不準確的地方,如若發現請網友評論指出,謝謝!

十三、$.ajax、模態/非模態框、window.open()、href屬性、submit()等提交請求及優劣及問題解決