> 웹 프론트엔드 > JS 튜토리얼 > Ajax에서 부분 페이지 점프 기능을 만드는 방법

Ajax에서 부분 페이지 점프 기능을 만드는 방법

php中世界最好的语言
풀어 주다: 2018-04-25 16:14:34
원래의
2422명이 탐색했습니다.

이번에는 Ajax를 사용하여 부분 페이지 점프를 하는 방법을 보여드리겠습니다. Ajax를 사용하여 부분 페이지 점프를 할 때의 주의 사항은 무엇입니까?

코드 샘플 분석을 통해 부분 페이지 점프 및 결과 반환을 구현하는 Ajax 구현을 소개하겠습니다.

1 결과 반환이 포함된 제출 프로세스

제출 버튼이 사용됩니다. 여기서 설명할 HTML 코드는 다음과 같습니다.

<input type="button" class="btn" value="提报" name="submit4" onClick="tibao();">
로그인 후 복사

보고서 버튼을 클릭한 후 ajax를 통한 작업 처리로 이동합니다. JavaScript코드는 다음과 같습니다.

function tibao(){
var id='';
var URL = <select:link page="/smokeplan.do?method=Tibao&idset="/>+id;
  $.ajax({url: URL, 
      type: 'GET',
      success: function(result) {
           alert(result);
        }
  });
}
로그인 후 복사

작업 처리가 완료된 후 반환된 결과는 다음 위치에 배치됩니다. 결과가 표시되고 프롬프트 메시지가 페이지에 나타납니다. 물론 여기에서 작업을 점프하려면 xml 구성이 필요합니다.

백그라운드 Java 클래스 처리 프로세스는 다음과 같습니다.

//提报
    public void Tibao(ActionMapping mapping, ActionForm form,
        HttpServletRequest request, HttpServletResponse response) throws Exception {
      String idset=request.getParameter("idset");
      CallHelper helper = initializeCallHelper("L_SmokeBoxtibaoWLDan", form,request, false);
      helper.setParam("bill_ids",idset);
      helper.setParam("personid",getPersonId(request));
      helper.execute();
      PrintWriter write = response.getWriter();
      write.print(helper.getOutput("message"));
      write.close();
    }
로그인 후 복사

여기서 데이터는 sql 문을 통해 처리되고 메시지가 반환되며 해당 정보가 페이지에 인쇄됩니다.

여기에서 수행된 작업의 결과는 다음과 같습니다. 해당 응답 위치에 반영되므로 새 응답 대신 응답에 속하는 스트림을 얻습니다.

즉, 거기에서 점프하면 내 정보가 그곳으로 반환된다는 뜻입니다. 따라서 js에서는 결과를 사용하여 반환된 결과를 받을 수 있고 경고를 사용하여 프롬프트할 수 있습니다.

AJAX를 사용하여 페이지 점프를 구현하는 방법

샘플 코드는 다음과 같습니다.

프로젝트에서 ajaxAnywhere 프레임워크를 사용하여 ajax를 구현하는 방법은 효과가 좋고 구현하기 쉽지만 이제 문제가 발생합니다. 페이지가 효과를 달성하더라도 비즈니스는 양식을 제출해야 합니다. 이 경우 제출을 클릭한 후에도 정의한 영역이 새로 고쳐집니다. 이때 단순히 양식을 제출하는 것만으로는 충분하지 않습니다. 제가 채택한 솔루션은 다음과 같습니다.

위의 문제를 해결하려면 js를 사용하여 강력한 BS 프로젝트 개발 도구, 함수를 자체 정의하세요.

function doGuahao()
{
 if(checkdata())
 {
 if(document.form1.result_flag.value=="0")
 {
  return false;
 }
 else
 {
  if(document.form1.checktype.value=="danganhao")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
  if(document.form1.checktype.value=="xingming")
  {
  form1.action = parent.left.url2;
  form1.submit();
  }
  if(document.form1.checktype.value=="shenfenzheng")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
 }
 } 
}
로그인 후 복사
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!

추천 자료:

Ajax는 로딩 효과를 구현합니다

JS는 ajax 호출 배경 정의(코드 포함)를 구현합니다.

위 내용은 Ajax에서 부분 페이지 점프 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿