새 JSP 페이지로 이동하기 위해 Ajax를 구현하는 방법-JS 튜토리얼-php.cn

새 JSP 페이지로 이동하기 위해 Ajax를 구현하는 방법

黄舟

풀어 주다： 2017-11-01 10:02:42

원래의

2531명이 탐색했습니다.

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

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

로그인 후 복사

jsp 페이지 본문

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

로그인 후 복사

위 내용은 새 JSP 페이지로 이동하기 위해 Ajax를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

새 JSP 페이지로 이동하기 위해 Ajax를 구현하는 방법