이전에 쓴 것처럼,이 데모를 완료했을 때, 이제 모든 사람들이 더 이상 Ajax를 사용하여 공동 메뉴를 완료하지 않는다는 것을 알았습니다. 실제로 저자의 데모는 이것을 완료하기위한 것이 아닙니다. 저자의 주요 학습 방향은 Javaweb 배경의 비즈니스 논리 개발입니다. 그러나 백그라운드에서 작업 할 때는 여전히 프론트 엔드, 특히 AJAX와 같은 비동기 데이터 제출 기술을 이해하고 마스터해야합니다. 그래서 여기서는 연결 메뉴를 사용하여 Ajax 비동기 제출을 연습 한 다음 비동기 제출 양식의 여러 데모를 작성합니다.
저자의 배경은 Spring+SpringMVC 프레임 워크를 사용합니다. 이 부분은 여기에 설명되어 있지 않으며 초점은 jQuery와 Ajax에 있습니다.
먼저 리소스 jquery.js를 다운로드하십시오
jQuery 공식 웹 사이트 링크
둘째, 다운로드 된 jquery.js를 프로젝트로 가져 오십시오
javaweb 프로젝트에서는 웹 프론트에 넣습니다 (자신의 폴더를 만들 수도 있지만 Web-Inf 파일에 넣지 마십시오).
셋째, 코드 작성을 시작하십시오
새 JSP 파일을 만듭니다
코드는 다음과 같습니다
<%@page import = "java.util.map"%> <%@page import = "java.util.list"%> <%@page language = "java"contenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%> <! ductype html public "-// dtml html 전환 // en ""http://www.w3.org/tr/html4/loose.dtd"> html> <head> http-equiv = "content-type"content = "텍스트/html> ajax test> </head> </head> </head> 배경에서 프론트 엔드로 전달되었습니다. Ajax 주제와 분리 될 수 있으며 너무 많은주의를 기울일 필요가 없습니다-> <%list <map <string, object >> listmap = (list <map <string, object >>) request.getAttribute ( "list"); %> <select id = "class"onchange = "getStudent (this.value)"> <옵션 값 = "-1"> 클래스 </옵션> <%for (int i = 0; i <listmap.size (); i ++) {객체> map = listmap.get;%> <%= map.get ( "class")). %> </옵션> < %} %> <!-첫 번째 클래스를 선택한 다음 두 번째 메뉴 옵션은 선택한 컨텐츠에 따라 배경 데이터베이스의 데이터를 동기화하여 두 번째 메뉴의 옵션을 설정합니다-> </select> <!-두 번째 메뉴, 선택한 클래스에 따라 이름을 선택하십시오.> </body </body <!-select> </body> <! -> <script type = "text/javaScript"src = "jQuery/jQuery-3.1.1.min.js"> </script> <!-jQuery에서 ajax를 사용하여 인터페이스의 비동기 동기화를 수행합니다-> <query 표준 syntax $ (문서) .Reade () {// select of the select of the selects and the select with exceration to the select with excert. 이 컨트롤 변경에 의해이 함수 $ ( "#class"). change (function () {// jQuery에서 ajax $ .ajax를 호출하십시오 ({// 주로 "get"및 "post"유형을 설정하십시오. "post", 제출 된 URL을 설정할 수 있습니다. 다른 도메인의 리소스를 호출 해야하는 경우 Google을 통해 Cross-Domain 문제 URL을 해결하려면 "ajax.html? classname ="+$ ( "#class"). val (), // 배경 반환 형식을 설정하고 일반적으로 JSON을 직접 사용하십시오. 이 문장은 놓칠 수 없습니다. 그렇지 않으면 배경이 데이터를 반환하면 성공 방법을 데이터 유형으로 호출하지 않습니다 : "json", // 배경이 데이터를 성공적으로 반환하면 메소드가 호출됩니다. 데이터 매개 변수는 jQuery에서 ajax가 형식화 한 JSON 데이터를 나타냅니다 (실제로 우리는 jquery에서 수동으로 포맷해야하며, 주석에 순수한 JS 메소드를 작성해야합니다. jQuery에서 JSON 데이터를 형식화하는 방법은 parse) 성공 : 기능 (데이터) { "#name"; // Add an (); // 비어 있습니다. 옵션 $ ( "#name"). Append ( "<pollite> name </옵션>"); // 전체 데이터 (JSON 데이터)를 루프하고 옵션 $ .Each (data, function (i, n) {$ ( "#name")를 추가하십시오. <pluxt> "+data [i] .name+"</옵션> ");});});});});});});}); </script> <!-제출 방법은 jQuery 라이브러리를 사용하지 않습니다 (이것은 순수한 JS 코드가 사용되지 않지만 스크립트를 이해하는 데 사용될 수 있습니다) <!-taint =/javascript"> // 이 메소드를 호출하려면 선택한 컨트롤에 onchange를 추가하면이 클래스 이름 변수 기능 getStudent (className) {if (className! = "-1")에 자동으로 저장됩니다. {// xmlhttprequest 메소드를 사용합니다.이 메소드는 실제로 var var xmlhtprequest (new xmlhtprequest)에 사용되었습니다. 열린 방법을 사용하는 매개 변수. 마지막 진실은 비동기 제출을 사용하여 생략 할 수 있음을 의미합니다. 기본값은 trueRequest.open ( "post", "ajax.html? classname ="+classname, true); // ajax 요청 요청 (); // ajax request request.send.send.send.send (); // 요청 2 3 4, 4, 4, 4, ajax request request.send (); function () {// 다음 단계가 (request.readystate === 4)에 대해서만 수행 될 것이라고 판단합니다. {// 웹 페이지의 리턴 코드가 OK가 될 때 200임을 판단하고 다음 단계로 진행하면 (request.Status == 200) {// 반환 된 JSON DATA = JSON.PARSE (rement.ResponSetext); document.getElementById ( "name"). length; i ++) {document.getElementById ( "name"). remove ( "name"). 옵션 [i]);넷째, 최종 효과 다이어그램
위는 편집자가 당신에게 소개 한 Javaweb 개발입니다. jquery 및 ajax를 사용하여 동적 링키지 메뉴 효과를 달성합니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!