Ajax enables the partial refresh of the page, which updates the page's local information without refreshing the entire page. Project encountered a problem: in the user list also, when clicking on a button to query the user's information, the query successfully jump to the user details interface, the query failed, the original page pop-up message. Think of two solutions:
method One:Click the button, call the normal method to query the user information, the query successfully jump to the user Details page, the query failed, redirect calls the method of querying the user list, after the method of querying the user list to jump to the user list page and pop up the message, the equivalent of reloading the user list page.
Method Two:The user List page cannot be reloaded as required. Using AJAX to query the user's details, the query returns the user JSON string successfully, and the query fails to return error. Background method:?
| 1234567891011121314 |
@RequestMapping(value = "searchUser") publicvoidsearchHome(HttpServletResponse response){ String result = null; ... 查询用户的方法 ... if(查询成功){ result = JsonUtil.objectToJson(查询结果对象);//结果对象转化成Json字符串，在ajax的结果中跳转到用户详情的处理方法 AjaxUtil.ajax(response,result); }else{//查询失败，返回提示信息 AjaxUtil.error(response, "查询用户失败"); } } |
Ajax for JSP pages:?
| 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数据传过去 ... }elseif(!obj.success){//查询失败，弹出提示信息 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert("查询用户有误！"); } }); } |
The focus here is on how to call the normal method in the Ajax callback function and pass the previously queried user data to the normal method (the red part of the pseudo code above), and then jump to the user Details page. (1) Error case:?
| 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); }elseif(!obj.success){//查询失败，弹出提示信息 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert("查询用户有误！"); } }); } |
Error Reason: The Window.location.href method is a Get method, which makes the parameter display in the URL of the browser unsafe, and the length of the data transfer is limited. (2) Think of the stupid method: in the body to write a hidden form form, in the callback function to copy the user data found in the form form input, and then submit the form to the normal method, this is the Post method submitted data, and can jump to the new page:?
| 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(); }elseif(!obj.success){//查询失败，弹出提示信息 weui.Loading.info(obj.message); } }, error : function(error) { weui.alert("查询用户有误！"); } }); } |
The body of the JSP page?
| 12345 |
<BODY> &NBSP;&NBSP;&NBSP;&NBSP; <form id= "UserForm" action= method= "POST" > &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; <input id= "Userformjson" name= "Userformjson" type= "hidden" /> &NBSP;&NBSP;&NBSP;&NBSP; </FORM> </BODY> |
Ajax jumps to the new JSP page (local refresh)
