ajax_javascript 기술을 사용하여 부분 페이지 점프 및 결과 반환을 구현하는 방법

코드 샘플 분석을 통해 부분 페이지 점프 및 결과 반환을 구현하는 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&#63;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를 사용하여 페이지 이동을 구현하는 방법

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

Ajax를 구현하기 위해 프로젝트에서 ajaxAnywhere 프레임워크를 사용했습니다. 효과는 좋고 구현하기 쉽습니다. 그러나 문제는 페이지가 효과를 달성하더라도 이 경우 여전히 양식을 제출해야 한다는 것입니다. , 제출을 클릭한 후에도 여전히 정의한 영역이 새로 고쳐집니다. 이때 단순히 양식을 제출하는 것만으로는 충분하지 않습니다.

위의 문제를 해결하기 위해 강력한 BS 프로젝트 개발 도구인 js를 사용하여 기능을 맞춤화하세요.

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();
  }
 }
 } 
}

위 내용은 Ajax가 부분 페이지 점프 및 결과 반환을 구현하는 방법을 소개하는 이 기사의 전체 내용입니다.