標籤:success hidden 瀏覽器 add data form表單 result 成功 處理
ajax可以實現局部重新整理頁面,即在不重新整理整個頁面的情況下更新頁面的局部資訊。項目中遇到一個問題:在使用者列表也,當點擊某個按鈕時需要去查詢使用者的資訊,查詢成功跳轉到使用者詳情介面;查詢失敗,則在原頁面彈出提示資訊。想到兩個解決辦法:
方法一:點擊按鈕,調用普通方法去查詢使用者資訊,查詢成功跳轉到使用者詳情頁面;查詢失敗,重新導向調用查詢使用者列表的方法,在查詢使用者列表的方法結束後重新跳轉到使用者列表頁面並彈出提示資訊,相當於重新載入了使用者列表頁面。
方法二:根據需求,不可以重新載入使用者列表頁面。用ajax調用查詢使用者詳情的方法,查詢成功返回使用者Json串,查詢失敗則返回error。 後台方法: ?
1234567891011121314 |
@RequestMapping (value = "searchUser" ) public void searchHome(HttpServletResponse response){ String result = null ; ... 查詢使用者的方法 ... if (查詢成功){ result = JsonUtil.objectToJson(查詢結果對象); //結果對象轉化成Json字串,在ajax的結果中跳轉到使用者詳情的處理方法 AjaxUtil.ajax(response,result); } else { //查詢失敗,返回提示資訊 AjaxUtil.error(response, "查詢使用者失敗" ); } } |
jsp頁面的ajax: ?
123456789101112131415161718192021222324 |
function searchUser(){ $.ajax({ url : "testurl/searchUser" , cache : false , type : ‘POST‘ , data : { 查詢用的資料,比如使用者ID }, success : function(data) { var obj = eval( "(" +data+ ")" ); if (obj.success==undefined){ //查詢成功,跳轉到詳情頁面 ... 跳轉到使用者詳情處理方法,將date資料傳過去 ... } else if (!obj.success){ //查詢失敗,彈出提示資訊 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert( "查詢使用者有誤!" ); } }); } |
此處的重點在於如何在ajax的回呼函數中調用普通方法,並將之前查詢出的使用者資料傳到普通方法中(上面虛擬碼中紅色的部分),繼而跳轉到使用者詳情頁面。(1)錯誤案例:?
123456789101112131415161718192021 |
function searchUser(){ $.ajax({ url : "testurl/searchUser" , cache : false , type : ‘POST‘ , data : { 查詢用的資料,比如使用者ID }, success : function(data) { var obj = eval( "(" +data+ ")" ); if (obj.success==undefined){ //查詢成功,跳轉到詳情頁面,encodeURIComponent編碼是為了防止url後面傳送的參數中文亂碼,在幕後處理時需要解碼 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方法,這會使得參數顯示的瀏覽器的url中,不安全,並且資料傳送的長度有限制。 (2)想到的笨方法:在body中寫隱藏的form表單,在回呼函數中把查到的使用者資料複製給form表單中的input,然後提交表單跳轉到普通方法中,這樣就是以post方法提交的資料,並且可以跳轉到新頁面了:?
1234567891011121314151617181920212223 |
function searchUser(){ $.ajax({ url : "testurl/searchUser" , cache : false , type : ‘POST‘ , data : { 查詢用的資料,比如使用者ID }, success : function(data) { var obj = eval( "(" +data+ ")" ); if (obj.success==undefined){ //查詢成功,跳轉到詳情頁面 $( "#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?
12345 |
<body> <form id= "userForm" action= "" method= "post" > <input id= "userFormJson" name= "userFormJson" type= "hidden" /> </form> </body> |
ajax跳轉到新的jsp頁面(局部重新整理)