Sharing on how to jump to a new jsp page with ajax-PHP Tutorial-php.cn

Sharing on how to jump to a new jsp page with ajax

小云云

Release： 2023-03-18 10:18:02

Original

2427 people have browsed it

ajax can partially refresh the page, that is, update the partial information of the page without refreshing the entire page. This article mainly introduces the method of ajax jumping to a new jsp page. It updates the partial information of the page without refreshing the entire page. It has certain reference value. Interested friends can refer to it. I hope it can help everyone. .

I encountered a problem in the project: In the user list, when a button is clicked, the user's information needs to be queried. If the query is successful, it will jump to the user details interface; if the query fails, a prompt message will pop up on the original page.

Think of two solutions:

Method 1:

Click the button and call the normal method to query User information, if the query succeeds, it will jump to the user details page; if the query fails, the redirection will call the method of querying the user list. After the method of querying the user list is completed, it will jump to the user list page again and a prompt message will pop up, which is equivalent to reloading the user. List page.

Method 2:

According to requirements, the user list page cannot be reloaded. Use ajax to call the method of querying user details. If the query is successful, the user's Json string will be returned. If the query fails, an error will be returned.

Background method:

@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, "查询用户失败");
    }  
 }

Copy after login

ajax of jsp page:

function searchUser(){
     $.ajax({
        url : "testurl/searchUser",
        cache : false,
        type : &#39;POST&#39;,
        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("查询用户有误！");
        }
     });    
  }

Copy after login

The focus here is how to call the ordinary method in the ajax callback function, and pass the previously queried user data to the ordinary method (the red part in the pseudo code above), and then jump to the user details page.

(1) Error case:

function searchUser(){
      $.ajax({
        url : "testurl/searchUser",
        cache : false,
        type : &#39;POST&#39;,
        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("查询用户有误！");
        }
      });    
   }

Copy after login

Cause of error: window.location.href method is a get method, which will make The parameters displayed in the URL of the browser are not secure, and the length of data transmission is limited.

(2) The stupid method that comes to mind: write a hidden form in the body, copy the found user data to the input in the form in the callback function, and then submit the form to jump to In the ordinary method, this is the data submitted by the post method, and you can jump to a new page:

function searchUser(){
      $.ajax({
        url : "testurl/searchUser",
        cache : false,
        type : &#39;POST&#39;,
        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("查询用户有误！");
        }
      });    
   }

Copy after login

body of the jsp page

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

Copy after login

Related recommendations:

Detailed introduction to jsp page jump

##java Methods to implement jsp page jump

Summary of JSP page jump method

The above is the detailed content of Sharing on how to jump to a new jsp page with ajax. For more information, please follow other related articles on the PHP Chinese website!