十三、$.ajax、模態/非模態框、window.open()、href屬性、submit()等提交請求及優劣及問題解決
1. $.ajax提交請求進行數據更新,並通過回調進行有效提示
$.ajax({ type: "post", url: dispacher, data: {"insurCode" : tmp, "currentPage" : currentpage, "pageDirection" : ‘current‘ }, success: function(data) {View Codeif(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();
$.ajax({})優劣:
優勢:提交請求時,可以是實現回調,進而判斷該請求是處理成功還是處理失敗了
劣勢:不支持流文件的回調。例如當你對生成的excle文件進行下載是使用$.ajax({})是無法實現的,除非...使用組合,將在該文的最後進行列舉說明
2、模態提交請求彈出新窗口,且該窗口不關閉是無法對父頁面/其他頁進行操作
操作1:父頁面代碼: //通過模態框提交請求的代碼: var dispacher==‘auditAction.do?action=updateById‘; var temp = window.showModalDialog( dispacher + "&insurCode=" + tmp + "¤tPage=" + 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¤tPage=<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()等提交請求及優劣及問題解決