일반 방식 과 ajax 방식 으로 배경 에서 데 이 터 를 가 져 와 웹 페이지 에 불 러 옵 니 다.

1. 일반적인 방법 은 해당 servlet 에 방문 하여 데 이 터 를 얻 고 request 도 메 인 에 저장 하 며 jsp 페이지 로 이동 하여 jsp 탭 을 통 해 데 이 터 를 얻 는 것 이 아 닙 니 다. 앞의 글 은 클릭 하여 링크 를 여 는 것 을 언급 했 습 니 다.
2. 일부 규칙 을 통 해 폼 데 이 터 를 검사 하려 면 데이터 베 이 스 를 방문 하지 않 았 습 니 다. jquery 는 두 가지 선택 이 아 닙 니 다. jquery 폼 검사 플러그 인 으로 이동 하려 면 누 르 십시오.
3, ajax 를 통 해 배경 정보 획득
쇼핑 몰 을 예 로 들 면 쇼핑 몰 내 비게 이 션 바 는 통용 되 며 일반적으로 독립 된 jsp 페이지 이다.head. jsp 페이지 를 새로 만 듭 니 다. 포함 되 어 있 기 때문에 jquery 플러그 인 을 추가 하지 않 아 도 됩 니 다. ajax 비동기 로 배경 에 접근 합 니 다. 배경 에서 데이터 베 이 스 를 가 져 온 데 이 터 는 List 집합 입 니 다. Gson 도 구 를 통 해 List 를 JSon 문자열 로 ajax 엔진 에 되 돌려 줍 니 다. 스 크 립 트 js 동적 으로 프론트 페이지 에 추 가 됩 니 다. 사용 하기 전에 Gson 의 jar 패 키 지 를 가 져 옵 니 다.
head. jsp 코드

<span style="color:#bababa">type=</span><span style="color:#a5c261">"text/javascript"</span><span style="color:#e8bf6a">>
</span><span style="color:#e8bf6a">   </span><span style="color:#9876aa">$</span>(<span style="color:#cc7832"><strong>function</strong></span>(){
       <span style="color:#cc7832"><strong>var </strong></span>content =<span style="color:#6a8759">""</span><span style="color:#cc7832">;
</span><span style="color:#cc7832">      </span><span style="color:#9876aa">$</span>.post(
         <span style="color:#6a8759">"</span><span style="color:#cc7832; background-color:#232525"><strong>${
      </strong></span><span style="background-color:#232525">pageContext.request.contextPath</span><span style="color:#cc7832; background-color:#232525"><strong>}</strong></span><span style="color:#6a8759">/categoryList"</span><span style="color:#cc7832">,
</span><span style="color:#cc7832">         </span><span style="color:#cc7832"><strong>function</strong></span>(data){
            <span style="color:#cc7832"><strong>for</strong></span>(<span style="color:#cc7832"><strong>var </strong></span>i = <span style="color:#6897bb">0</span><span style="color:#cc7832">; </span>i < data.<span style="color:#9876aa">length</span><span style="color:#cc7832">; </span>i++){
               content +=<span style="color:#6a8759">"<li><a href='#'>"</span>+data[i].cname+<span style="color:#6a8759">"</a></li>"
</span><span style="color:#6a8759">            </span>}
            <span style="color:#9876aa">$</span>(<span style="color:#6a8759">"#categoryListUl"</span>).<span style="color:#9876aa">html</span>(content)<span style="color:#cc7832">;
</span><span style="color:#cc7832">         </span>}<span style="color:#cc7832">,
</span><span style="color:#cc7832">         </span><span style="color:#6a8759">"json"
</span><span style="color:#6a8759">      </span>)
   })
<span style="color:#e8bf6a">

servlet 코드

ProductService service = new ProductService();

List category = service.findCategory();

Gson gson = new Gson();

String s = gson.toJson(category);

response.setContentType("text/html;charset=utf-8");

response.getWriter().write(s);

ajax 매개 변수 상세 정보
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
 
그 중:
url: 요청 한 서버 쪽 주소
data: 요청 서버 의 데 이 터 를 대표 합 니 다 (key = value 형식 일 수도 있 고 json 형식 일 수도 있 습 니 다)
callback: 서버 측 이 트리거 한 함수 에 성공 적 으로 응답 하 였 음 을 표시 합 니 다 (정상 적 인 성공 으로 되 돌아 와 야 실행 합 니 다)
type: 서버 에서 되 돌아 오 는 데이터 형식 을 표시 합 니 다 (jquery 는 지정 한 형식 에 따라 자동 으로 변환 합 니 다)
자주 사용 하 는 반환 유형: text, json, html 등
 
3）$.ajax( { option1:value1,option2:value2... } );
자주 사용 하 는 option 은 다음 과 같 습 니 다.
async: 비동기 여 부 는 기본적으로 true 가 비동기 입 니 다.
data: 서버 에 보 내 는 매개 변 수 는 json 형식 을 사용 하 는 것 을 권장 합 니 다.
dataType: 서버 에서 되 돌아 오 는 데이터 형식, text 와 json 을 자주 사용 합 니 다.
success: 실 행 된 함수 에 성공 적 으로 응 답 했 습 니 다. 대응 하 는 유형 은 function 형식 입 니 다.
type: 요청 방식, POST / GET
url: 서버 쪽 주소 요청