ajax跳轉(zhuǎn)到新的jsp頁面的方法
ajax可以實現(xiàn)局部刷新頁面,即在不刷新整個頁面的情況下更新頁面的局部信息。
項目中遇到一個問題:在用戶列表也,當點擊某個按鈕時需要去查詢用戶的信息,查詢成功跳轉(zhuǎn)到用戶詳情界面;查詢失敗,則在原頁面彈出提示信息。
想到兩個解決辦法:
方法一:
點擊按鈕,調(diào)用普通方法去查詢用戶信息,查詢成功跳轉(zhuǎn)到用戶詳情頁面;查詢失敗,重定向調(diào)用查詢用戶列表的方法,在查詢用戶列表的方法結束后重新跳轉(zhuǎn)到用戶列表頁面并彈出提示信息,相當于重新加載了用戶列表頁面。
方法二:
根據(jù)需求,不可以重新加載用戶列表頁面。用ajax調(diào)用查詢用戶詳情的方法,查詢成功返回用戶Json串,查詢失敗則返回error。
后臺方法:
@RequestMapping(value = "searchUser") public void searchHome(HttpServletResponse response){ String result = null; ... 查詢用戶的方法 ... if(查詢成功){ result = JsonUtil.objectToJson(查詢結果對象);//結果對象轉(zhuǎn)化成Json字符串,在ajax的結果中跳轉(zhuǎn)到用戶詳情的處理方法 AjaxUtil.ajax(response,result); }else{//查詢失敗,返回提示信息 AjaxUtil.error(response, "查詢用戶失敗"); } }
jsp頁面的ajax:
function searchUser(){ $.ajax({ url : "testurl/searchUser", cache : false, type : 'POST', data : { 查詢用的數(shù)據(jù),比如用戶ID }, success : function(data) { var obj = eval("("+data+")"); if(obj.success==undefined){//查詢成功,跳轉(zhuǎn)到詳情頁面 ... 跳轉(zhuǎn)到用戶詳情處理方法,將date數(shù)據(jù)傳過去 ... }else if(!obj.success){//查詢失敗,彈出提示信息 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert("查詢用戶有誤!"); } }); }
此處的重點在于如何在ajax的回調(diào)函數(shù)中調(diào)用普通方法,并將之前查詢出的用戶數(shù)據(jù)傳到普通方法中(上面?zhèn)未a中紅色的部分),繼而跳轉(zhuǎn)到用戶詳情頁面。
(1)錯誤案例:
function searchUser(){ $.ajax({ url : "testurl/searchUser", cache : false, type : 'POST', data : { 查詢用的數(shù)據(jù),比如用戶ID }, success : function(data) { var obj = eval("("+data+")"); if(obj.success==undefined){//查詢成功,跳轉(zhuǎn)到詳情頁面,encodeURIComponent編碼是為了防止url后面?zhèn)魉偷膮?shù)中文亂碼,在后臺處理時需要解碼 window.location.href = "testurl/userForm?userJson="+encodeURIComponent(data); }else if(!obj.success){//查詢失敗,彈出提示信息 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert("查詢用戶有誤!"); } }); }
錯誤原因:window.location.href方法為get方法,這會使得參數(shù)顯示的瀏覽器的url中,不安全,并且數(shù)據(jù)傳送的長度有限制。
(2)想到的笨方法:在body中寫隱藏的form表單,在回調(diào)函數(shù)中把查到的用戶數(shù)據(jù)復制給form表單中的input,然后提交表單跳轉(zhuǎn)到普通方法中,這樣就是以post方法提交的數(shù)據(jù),并且可以跳轉(zhuǎn)到新頁面了:
function searchUser(){ $.ajax({ url : "testurl/searchUser", cache : false, type : 'POST', data : { 查詢用的數(shù)據(jù),比如用戶ID }, success : function(data) { var obj = eval("("+data+")"); if(obj.success==undefined){//查詢成功,跳轉(zhuǎn)到詳情頁面 $("#userFormJson").val(data); $("#userForm").attr("action","testurl/userForm"); $("#userForm").submit(); }else if(!obj.success){//查詢失敗,彈出提示信息 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert("查詢用戶有誤!"); } }); }
jsp頁面的body
<body> <form id="userForm" action="" method="post"> <input id="userFormJson" name="userFormJson" type="hidden"/> </form> </body>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JS中Select下拉列表類(支持輸入模糊查詢)功能
- AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼
- JS設置下拉列表框當前所選值的方法
- js實現(xiàn)下拉列表選中某個值的方法(3種方法)
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- JS實現(xiàn)支持多選的遍歷下拉列表代碼
- 使用JS模擬錨點跳轉(zhuǎn)的實例
- js實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領紅包功能
- JSP頁面跳轉(zhuǎn)方法大全
- JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼
- JS實現(xiàn)點擊下拉列表文本框中出現(xiàn)對應的網(wǎng)址,點擊跳轉(zhuǎn)按鈕實現(xiàn)跳轉(zhuǎn)
相關文章
ajax獲取json數(shù)據(jù)為undefined原因分析
Ajax 允許在不干擾 Web 應用程序的顯示和行為的情況下在后臺進行數(shù)據(jù)檢索。這篇文章主要介紹了ajax獲取json數(shù)據(jù)為undefined--原因,需要的朋友可以參考下2017-11-11基于Ajax實現(xiàn)下拉框聯(lián)動顯示數(shù)據(jù)
本篇文章給大家介紹基于ajax實現(xiàn)下拉框聯(lián)動顯示數(shù)據(jù),代碼非常簡單,需要的朋友可以參考下2015-09-09利用AJAX開源項目 在網(wǎng)頁里播放視頻實現(xiàn)方法
下載videobox 1.1.zip把它解壓到asp.net項目的目錄下,并用“Add New Item”新建一個Html文件用以播放視頻。2008-11-11