집 > 기사 > 백엔드 개발 > Ajax를 사용하여 새 JSP 페이지로 이동하는 방법 공유

Ajax를 사용하여 새 JSP 페이지로 이동하는 방법 공유

小云云원래의: 2017-12-25 09:26:362435검색

ajax는 페이지를 부분적으로 새로 고칠 수 있습니다. 즉, 전체 페이지를 새로 고치지 않고 페이지의 부분 정보를 업데이트할 수 있습니다. 이 글은 주로 새로운 jsp 페이지로 점프하는 방법을 소개합니다. 전체 페이지를 새로 고치지 않고 페이지의 일부 정보를 업데이트합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

프로젝트에서 문제가 발생했습니다. 사용자 목록에서 버튼을 클릭하면 사용자 정보를 쿼리해야 합니다. 쿼리가 성공하면 쿼리가 실패하면 사용자 세부 정보 인터페이스로 이동합니다. 원본 페이지에 프롬프트 메시지가 나타납니다.

두 가지 해결 방법을 생각해 보세요.

방법 1:

버튼을 클릭하고 일반 메서드를 호출하여 사용자 정보를 쿼리하면 쿼리가 성공하면 사용자 세부 정보 페이지로 이동합니다. 실패하면 리디렉션 호출은 사용자 목록을 쿼리하는 것입니다. 사용자 목록 쿼리 방법이 끝난 후 사용자 목록 페이지로 돌아가 프롬프트 메시지를 표시합니다. 이는 사용자 목록 페이지를 다시 로드하는 것과 같습니다.

방법 2:

요구 사항에 따라 사용자 목록 페이지를 다시 로드할 수 없습니다. ajax를 사용하여 사용자 세부 정보를 쿼리하는 방법을 호출합니다. 쿼리가 성공하면 사용자의 Json 문자열이 반환됩니다. 쿼리가 실패하면 오류가 반환됩니다.

백그라운드 메소드:

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

ajax of jsp 페이지:

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("查询用户有误！");
        }
     });    
  }

여기서 초점은 ajax 콜백 함수에서 일반적인 메소드를 호출하고 이전에 쿼리한 사용자 데이터를 전송하는 방법입니다. 일반적인 방법(위 의사코드의 빨간색 부분)을 클릭한 다음 사용자 세부정보 페이지로 이동합니다.

(1) 오류 사례:

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("查询用户有误！");
        }
      });    
   }

오류 원인: window.location.href 메서드는 get 메서드로, 브라우저 URL에 표시되는 매개변수를 안전하지 않게 만들고 데이터 전송 길이를 변경합니다. 한계입니다.

(2) 떠오르는 멍청한 방법: 본문에 숨겨진 폼을 작성하고, 찾은 사용자 데이터를 콜백 함수의 폼에 있는 입력으로 복사한 다음, 폼을 제출하고 일반 메서드로 점프하면, 이것은 post 방식으로 제출된 데이터이며 새 페이지로 이동할 수 있습니다:

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("查询用户有误！");
        }
      });    
   }

body of jsp page

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

Ajax를 사용하여 새 JSP 페이지로 이동하는 방법 공유

관련 기사