อย่างที่ฉันเขียนไว้ก่อนหน้านี้เมื่อฉันเสร็จสิ้นการสาธิตนี้ฉันพบว่าตอนนี้ทุกคนไม่ได้ใช้ Ajax เพื่อทำเมนูร่วมกันอีกต่อไป อันที่จริงการสาธิตของผู้เขียนไม่ได้ทำสิ่งนี้ให้เสร็จ ทิศทางการเรียนรู้หลักของผู้เขียนคือการพัฒนาตรรกะทางธุรกิจของพื้นหลัง Javaweb อย่างไรก็ตามเมื่อทำงานในพื้นหลังคุณยังต้องมีความเข้าใจเกี่ยวกับส่วนหน้าโดยเฉพาะอย่างยิ่งเทคโนโลยีของการส่งข้อมูลแบบอะซิงโครนัสเช่น AJAX จำเป็นต้องเข้าใจและเชี่ยวชาญ ดังนั้นที่นี่ฉันใช้เมนูที่ต่อกันเพื่อฝึกการส่ง Ajax แบบอะซิงโครนัสแล้วฉันจะเขียนการสาธิตหลายครั้งของแบบฟอร์มการส่งแบบอะซิงโครนัส
พื้นหลังของผู้เขียนใช้กรอบ Spring+SpringMVC ส่วนนี้ไม่ได้อธิบายไว้ที่นี่โฟกัสอยู่ที่ jQuery และ Ajax
ก่อนอื่นดาวน์โหลด Resource jQuery.js
ลิงค์เว็บไซต์อย่างเป็นทางการของ JQuery
ประการที่สองนำเข้า jQuery.js ที่ดาวน์โหลดมาในโครงการ
ในโครงการ Javaweb เพียงวางไว้ในเว็บคอนเนตเทนต์ (คุณสามารถสร้างโฟลเดอร์ของคุณเองได้ แต่อย่าใส่ไว้ในไฟล์ Web-Inf)
ประการที่สามเริ่มเขียนรหัส
สร้างไฟล์ JSP ใหม่
รหัสมีดังนี้
<%@page import = "java.util.map"%> <%@page import = "java.util.list"%> <%@page language = "java" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> transitional // en "" http://www.w3.org/tr/html4/loose.dtd"><html> <head> <meta http-equiv = "content-type" title> text> text/html; ขอส่งผ่านไปยังส่วนหน้าจากพื้นหลัง มันสามารถแยกออกจากหัวข้อ AJAX และไม่จำเป็นต้องให้ความสนใจมากเกินไป-> <%list <map <string, object >> listmap = (รายการ <map <string, object >>) request.getAttribute ("list"); %> <select id = "class" onChange = "getStudent (this.value)"> <ค่าตัวเลือก = "-1"> โปรดเลือกคลาส </ตัวเลือก> <%สำหรับ (int i = 0; i <listmap.size (); i ++) {แผนที่ <สตริง %> </petion> < %} %> <!-เลือกคลาสก่อนจากนั้นตัวเลือกเมนูที่สองจะซิงโครไนซ์ข้อมูลของฐานข้อมูลพื้นหลังแบบอะซิงโครนัสตามเนื้อหาที่เลือกดังนั้นการตั้งค่าตัวเลือกของเมนูที่สอง-> </select> <!-เมนูที่สอง -> <script type = "text/javascript" src = "jQuery/jQuery-3.1.1.min.js"> </script> <!-ใช้ ajax ใน jQuery เพื่อทำการซิงโครไนซ์แบบอะซิงโครนัส การเปลี่ยนแปลงฟังก์ชั่นนี้ $ ("#class"). การเปลี่ยนแปลง (function () {// เรียก Ajax $ .ajax ใน jQuery ({// ตั้งค่าวิธีการส่งส่วนใหญ่ "รับ" และ "post" type: "p ost" // ตั้งค่า URL ที่ส่งมาคุณสามารถเลือกท้องถิ่นได้ที่นี่ หากคุณต้องการโทรหาทรัพยากรจากโดเมนอื่นโปรด Google เพื่อแก้ไข URL ปัญหาข้ามโดเมน: "ajax.html? className ="+$ ("#class"). val (), // ตั้งค่ารูปแบบของการส่งคืนพื้นหลังโดยทั่วไปใช้ JSON โดยตรง ประโยคนี้ไม่ควรพลาด มิฉะนั้นเมื่อพื้นหลังส่งคืนข้อมูลวิธีความสำเร็จจะไม่ถูกเรียกว่าข้อมูล: "JSON", // เมื่อพื้นหลังส่งคืนข้อมูลสำเร็จวิธีการนี้จะถูกเรียก พารามิเตอร์ข้อมูลแสดงถึงข้อมูล JSON ที่จัดรูปแบบโดย Ajax ใน jQuery (อันที่จริงเราจำเป็นต้องจัดรูปแบบด้วยตนเองใน Ajax ที่ไม่ใช่ jQuery และฉันยังเขียนวิธี JS บริสุทธิ์ในความคิดเห็นวิธีการจัดรูปแบบข้อมูล JSON ใน jQuery คือการแยกวิเคราะห์) ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) ตัวเลือก $ ("#name"). ผนวก ("<petion> โปรดเลือกชื่อ </petion>"); // ลูปผ่านข้อมูลทั้งหมด (ข้อมูล JSON) และเพิ่มตัวเลือก $ .Each (ข้อมูล, ฟังก์ชั่น (i, n) {$ ("#name"). ผนวก (" <potion> "+data [i] .name+" </optup> ");});});});});});}); </script> <!-วิธีการส่งไม่ได้ใช้ไลบรารี jQuery onchange ไปยังตัวควบคุมการเลือกเพื่อเรียกใช้วิธีนี้จากนั้นค่าที่เลือกจะถูกเก็บไว้โดยอัตโนมัติในฟังก์ชั่นตัวแปรคลาสคลาสนี้ getStudent (className) {ถ้า (className! = "-1") {// ใช้ XMLHTTTPRequest วิธีการใช้จริง วิธีเปิด ความจริงสุดท้ายหมายความว่าคุณใช้การส่งแบบอะซิงโครนัสซึ่งสามารถละเว้นได้ ค่าเริ่มต้นคือ truerequest.open ("โพสต์", "ajax.html? classname ="+classname, true); // ส่งคำขอ jax request.send (); // ส่งคำขอ Ajax request.send (); // สถานะของคำขอเป็นส่วนใหญ่ 0 1 2 3 4 ว่าขั้นตอนต่อไปจะดำเนินการเฉพาะในกรณีที่ (request.readyState === 4) {// ตัดสินว่ารหัสส่งคืนของหน้าเว็บคือ 200 เมื่อตกลงให้ดำเนินการต่อไปในขั้นตอนต่อไปถ้า (request.status === 200) {// รูปแบบข้อมูล JSON ที่ส่งคืน i ++) {document.getElementById ("ชื่อ") ลบ (document.getElementById ("ชื่อ"). ตัวเลือก [i]);} document.getElementById ("ชื่อ") เพิ่ม (ตัวเลือกใหม่ (ข้อมูล [0]ประการที่สี่ไดอะแกรมเอฟเฟกต์สุดท้าย
ข้างต้นคือการพัฒนา Javaweb ที่บรรณาธิการแนะนำให้คุณรู้จัก การใช้ jQuery และ Ajax เพื่อให้ได้เอฟเฟกต์เมนูการเชื่อมโยงแบบไดนามิก ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!