집 > 기사 > 웹 프론트엔드 > Ajax를 사용하여 새 JSP 페이지로 이동하는 방법(코드 포함)

Ajax를 사용하여 새 JSP 페이지로 이동하는 방법(코드 포함)

php中世界最好的语言원래의: 2018-03-30 17:22:382097검색

이번에는 ajax(코드 포함)로 새 jsp 페이지로 점프하는 방법을 보여드리겠습니다. ajax에서 새 jsp 페이지로 점프할 때의 주의사항은 무엇인가요?

ajax는 페이지를 부분적으로 새로 고칠 수 있습니다. 즉, 전체 페이지를 새로 고치지 않고 페이지의 부분 정보를 업데이트할 수 있습니다.

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

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

방법 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 : '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) 오류 사례:

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 메서드는 브라우저 URL에 표시되는 매개변수를 안전하지 않게 만드는 get 메서드이며, 데이터 전송 길이가 제한됩니다.

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

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>
  <form id="userForm" action="" method="post">
    <input id="userFormJson" name="userFormJson" type="hidden"/>
  </form>
</body>

이 기사의 사례를 읽으신 후 해당 방식을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주의하세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!