Ajax jump to the new jsp page, ajax jump to the jsp page

Ajax jump to the new jsp page, ajax jump to the jsp page

Ajax can be used to partially refresh the page, that is, to update the partial information of the page without refreshing the entire page.

A problem occurs in the project: When you click a button in the user list, you need to query the user information. The query is successfully redirected to the user details page. If the query fails, a prompt is displayed on the original page.

Think of two solutions:

Method 1:

Click the button to call the common method to query the user information. The query is successful and the user details page is displayed. The query fails and the method to query the user list is redirected, after the method for querying the user list is completed, the user list page is displayed with a prompt, which is equivalent to reloading the user list page.

Method 2:

You cannot reload the user list page as needed. Call ajax to query user details. If the query succeeds, a Json string is returned. If the query fails, an error is returned.

Background method:

@ RequestMapping (value = "searchUser") public void searchHome (HttpServletResponse response) {String result = null ;... how to query a user... if (query successful) {result = JsonUtil. objectToJson (query result object); // The result object is converted to a Json string, and the processing method for redirecting to user details in ajax results is AjaxUtil. ajax (response, result);} else {// query failed. The error message AjaxUtil is returned. error (response, "failed to query user ");}}

Jsp page ajax:

Function searchUser () {$. ajax ({url: "testurl/searchUser", cache: false, type: 'post', data: {data used for query, such as user ID}, success: function (data) {var obj = eval ("(" + data + ")"); if (obj. success = undefined) {// query successful, jump to the details page... jump to the processing method of user details and pass the date data ...} else if (! Obj. success) {// query failed. The message weui.Loading.info (obj. message) ;}, error: function (error) {weui. alert ("error occurred when querying users! ");}});}

The key here is how to call a common method in the ajax callback function, and upload the previously queried user data to the normal method (the red part in the above pseudo code ), go to the user details page.

(1) Error cases:

Function searchUser () {$. ajax ({url: "testurl/searchUser", cache: false, type: 'post', data: {data used for query, such as user ID}, success: function (data) {var obj = eval ("(" + data + ")"); if (obj. success = undefined) {// the query is successful and jumps to the details page. encodeURIComponent encoding is used to prevent Chinese garbled characters of parameters transmitted after the url. During background processing, the window must be decoded. location. href = "testurl/userForm? UserJson = "+ encodeURIComponent (data);} else if (! Obj. success) {// query failed. The message weui.Loading.info (obj. message) ;}, error: function (error) {weui. alert ("error occurred when querying users! ");}});}

Cause of error: the window. location. href method is the get method, which makes the browser url displayed for parameters insecure and limits the length of data transmission.

(2) Stupid method: Write a hidden form in the body, and copy the user data found in the callback function to the input in the form, then, submit the form to jump to the normal method. In this way, the data submitted using the post method can be jumped to the new page:

Function searchUser () {$. ajax ({url: "testurl/searchUser", cache: false, type: 'post', data: {data used for query, such as user ID}, success: function (data) {var obj = eval ("(" + data + ")"); if (obj. success = undefined) {// the query is successful, and you are redirected to the details page $ ("# userFormJson "). val (data); $ ("# userForm "). attr ("action", "testurl/userForm"); $ ("# userForm "). submit ();} else if (! Obj. success) {// query failed. The message weui.Loading.info (obj. message) ;}, error: function (error) {weui. alert ("error occurred when querying users! ");}});}

Jsp page body

<body>  <form id="userForm" action="" method="post">    <input id="userFormJson" name="userFormJson" type="hidden"/>  </form></body>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.