ฉันได้ปรับใช้โครงการและเล่นแล้ว วันนี้ฉันได้ปรับปรุงฟังก์ชั่นของการปรับเปลี่ยนปริมาณของผลิตภัณฑ์ในตะกร้าสินค้าเพื่ออัปเดตราคารวมที่สอดคล้องกันบางส่วน ทุกคนรู้ว่าสิ่งนี้จะต้องนำไปใช้กับอาแจ็กซ์ ฉันไม่ได้เรียนรู้ Ajax มาก่อนและฉันเพิ่งใช้ฟังก์ชั่นเล็ก ๆ นี้เพื่อเรียนรู้ความรู้ Ajax
1. การวิเคราะห์ปัญหา
มาดูสถานการณ์บนหน้ากันเถอะ:
ฟังก์ชั่นดังกล่าวข้างต้น ก่อนที่ AJAX จะไม่พร้อมใช้งานคุณมักจะค้นหาการดำเนินการตามค่าที่แก้ไขของผู้ใช้จากนั้นกลับไปที่หน้า JSP ใหม่เพื่อโหลดหน้าทั้งหมดใหม่เพื่อทำการอัปเดตตัวเลขให้เสร็จสมบูรณ์ แต่ด้วยเทคโนโลยี AJAX เราสามารถใช้เทคโนโลยี AJAX เพื่อรีเฟรชการเปลี่ยนแปลงบางส่วนในสถานที่ที่เราต้องการเปลี่ยนแทนที่จะโหลดทั้งหน้าใหม่ ก่อนอื่นมาดูรหัสของส่วน JSP ที่สอดคล้องกับรูปภาพด้านบน:
<div> <!-ตะกร้าสินค้า-> <div id = "Shopping_cart"> <div> ตะกร้าสินค้าของฉัน </div> <table cellpadding = "0" cellpacing = "0"> <tr> <th> หมายเลขผลิตภัณฑ์ </th> <th colspan = "2" </tr> <c: foreach items = "$ {sessionscope.forder.sorders}" var = "sorder" varstatus = "num"> <tr lang = "$ {sorder.product.id}"> <td> <a href = "#"> $ {num.count src = "$ {shop}/files/$ {sorder.product.pic}"/> </td> <td> <a href = "#"> $ {sorder.name} </a> </td> <td> $ {sorder.price value = "$ {sorder.number}" lang = "$ {sorder.number}"> </td> <td> $ {sorder.price*sorder.number} </td> <td> <a href = "#"> </a> </td> id = "totals-table"> <tbody> <tr> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = ""> <strong> ￥ <span id = "total"> $ {sessionscope.forder.total} colspan = "1"> การขนส่ง </td> <td style = ""> ￥ <span id = "yunfei"> 0.00 </span> </td> </tr> <tr> <td colspan = "1"> <strong> ทั้งหมด </strong> id = "TotalAll"> <strong> $ {SessionsCope.forder.total} </strong> </span> </td> </tr> </tbody> </table> <div> <font> <a href = "$ {shop}/user/confirm.jsp" การยืนยัน </button> </a> </font> <font> <a href = "#"> <button type = "ปุ่ม"> <font> ล้างรถเข็น </font> </button> </font> <a href = "$} style = "Clear: ทั้งสอง"> </div> </div> </div> </div> </div> </div> </div> </div>ดูเหมือนมาก แต่ฟังก์ชั่นนั้นง่ายมาก มันใช้ข้อมูลที่เกี่ยวข้องจากโดเมนเพื่อแสดง หากเราต้องการใช้ฟังก์ชั่นที่อธิบายไว้ข้างต้นลองวิเคราะห์แนวคิดก่อน:
ก่อนอื่นคุณต้องลงทะเบียนเหตุการณ์: นั่นคือเหตุการณ์ที่เรียกใช้โดยกล่องข้อความในหมายเลขจะถูกแก้ไข;
ในเหตุการณ์นี้เราได้รับการป้อนหมายเลขโดยผู้ใช้และตัดสินความถูกต้องตามกฎหมายของอินพุตเพราะเราต้องป้องกันไม่ให้ผู้ใช้ป้อนแบบสุ่ม
หากถูกกฎหมายให้ส่งข้อมูลไปยังพื้นหลังผ่านคำขอ AJAX
พื้นหลังเรียกใช้วิธีตรรกะทางธุรกิจที่สอดคล้องกันเพื่อรับผลลัพธ์ใหม่สำหรับหมายเลขใหม่และส่งกลับไปยังเบื้องหน้าผ่านสตรีม
หลังจาก AJAX ได้รับผลลัพธ์จะอัปเดตข้อมูลที่ตำแหน่งที่สอดคล้องกัน กระบวนการทั้งหมดสิ้นสุดลง
หากมันผิดกฎหมายหมายเลขก่อนการแก้ไขจะปรากฏขึ้น ไม่มีการรักษา
2. การดำเนินการตามคำขอ AJAX
หลังจากวิเคราะห์กระบวนการแล้วเราจะเริ่มใช้งาน ก่อนอื่นวางรหัสของส่วน JS ที่นี่จากนั้นเราวิเคราะห์โดยละเอียดตามกระบวนการข้างต้น:
<script type = "text/javascript"> $ (function () {// 1. การลงทะเบียนเหตุการณ์ $ (". text"). การเปลี่ยนแปลง (ฟังก์ชั่น () {// 2. ตรวจสอบความถูกต้องของหมายเลขข้อมูล var = this.value; // คุณสามารถใช้ $ (นี่) && หมายเลข> 0) {// ถ้าเป็นเรื่องถูกกฎหมายแล้วหมายเลขอัปเดตแบบซิงโครนัส (นี้) .attr ("lang", หมายเลข); ID ของผลิตภัณฑ์และส่งคืนราคารวมหลังจากปริมาณที่แก้ไข $ .post ("sorder_updatesorder.action", {จำนวน: จำนวน, 'product.id': pid}, ฟังก์ชั่น (ทั้งหมด) {$ ("#total"). html (ทั้งหมด); // subtotal ของผลิตภัณฑ์ทั้งหมด var yunfei = $ ("#yunfei $ ("#totalall"). html ((ทั้งหมด*1 + yunfei*1) .tofixed (2)); // คำนวณผลรวมย่อยของผลิตภัณฑ์เดียวรักษาสองตำแหน่งทศนิยมราคา var ราคา = ($ (นี่) .parent (). prev (). html ()*หมายเลข) .tofixed (2); $ (นี่) .parent (). next (). html (ราคา); } else {// ถ้ามันผิดกฎหมายให้กู้คืนไปยังหมายเลขที่ถูกกฎหมาย this.value = $ (นี่) .attr ("lang"); }})})}) </script>2.1 เหตุการณ์การลงทะเบียน
เราจะเห็นได้ว่าเหตุการณ์การลงทะเบียนจะต้องอยู่ในกล่องข้อความนี้ก่อน ที่นี่มันอยู่ในตำแหน่งผ่านตัวเลือกคลาส เนื่องจากเป็นกล่องข้อความเปลี่ยน () ใช้ในการลงทะเบียนเหตุการณ์จากนั้นกำหนดฟังก์ชันฟังก์ชัน () เพื่อจัดการกับเหตุการณ์
2.2 กำหนดความถูกต้องตามกฎหมายของข้อมูล
ตกลงหลังจากลงทะเบียนเหตุการณ์เราต้องตัดสินเกี่ยวกับความถูกต้องตามกฎหมายของจำนวนที่ป้อนโดยผู้ใช้เนื่องจากผู้ใช้อาจป้อนหมายเลข 0 หรือตัวเลขติดลบอาจเข้าสู่ทศนิยมหรือแม้แต่ตัวอักษรหรืออักขระอื่น ๆ ISNAN (หมายเลข) หมายความว่าหากหมายเลขไม่ใช่ตัวเลขมันจะส่งคืนจริง เราสามารถใช้ฟังก์ชั่นนี้เพื่อตรวจสอบว่าเป็นตัวเลขหรือไม่ Parseint (หมายเลข) หมายถึงการปัดเศษอาร์เรย์แล้วเปรียบเทียบกับตัวเอง เราใช้สิ่งนี้อย่างชาญฉลาดเพื่อตรวจสอบว่าตัวเลขเป็นจำนวนเต็มหรือไม่
2.3 ส่งคำขอ AJAX
หากข้อมูลถูกกฎหมายหลังจากที่เราได้รับข้อมูลเราสามารถส่งคำขอ AJAX ไปยังพื้นหลังได้ เราต้องพิจารณาคำถาม: เราต้องผ่านพารามิเตอร์อะไรบ้าง? ก่อนอื่นหากผู้ใช้ต้องการอัปเดตปริมาณไม่ต้องสงสัยเลยว่าตัวเลขที่ป้อนโดยผู้ใช้จะต้องส่งผ่าน ประการที่สองผลิตภัณฑ์ใดที่ควรส่ง? กล่าวอีกนัยหนึ่งเราต้องได้รับหมายเลข ID ของผลิตภัณฑ์ที่ผู้ใช้ต้องการแก้ไข หลังจากรู้ว่าพารามิเตอร์ที่จะส่งเราสามารถหาวิธีที่จะได้รับหมายเลข ID
มีคำถามที่นี่ ผู้ใช้อาจมีมากกว่าหนึ่งผลิตภัณฑ์ในตะกร้าสินค้า โดยธรรมชาติพวกเขาจะคิดว่ามันจะดีถ้าพวกเขาสามารถได้รับรหัสของผลิตภัณฑ์ที่แตกต่างกันด้วยคำสั่ง ดังนั้นพวกเขาจึงคิดว่าจะใช้แท็กหลักของกล่องข้อความ เนื่องจากแท็กหลักของผลิตภัณฑ์ที่แตกต่างกันนั้นเหมือนกันพวกเขาจึงเป็นแท็ก <tr> ตัวแรกดังนั้นเราจึงใส่ ID ของผลิตภัณฑ์ในแอตทริบิวต์ Lang ในแท็ก <tr> ทำไมใส่ไว้ในแอตทริบิวต์ Lang? เนื่องจากแอตทริบิวต์ Lang นั้นไม่ได้ใช้โดยทั่วไปจึงใช้เพื่อกำหนดภาษาและการใช้แอตทริบิวต์ Lang จึงไม่ง่ายที่จะขัดแย้งกับแอตทริบิวต์อื่น ๆ ~ ด้วยวิธีนี้เราจึงสามารถรับรหัสผลิตภัณฑ์ผ่าน $ (นี้). parents ("tr: first") attr ("lang");
ถัดไปเริ่มส่งคำขอ AJAX ส่งพวกเขาโดยใช้วิธีการโพสต์ มีสี่พารามิเตอร์ในวิธีการโพสต์:
พารามิเตอร์ แรก คือการดำเนินการที่จะส่งไปยัง
พารามิเตอร์ ที่สอง คือพารามิเตอร์ที่จะผ่านโดยใช้รูปแบบ JSON
พารามิเตอร์ ที่สาม คือฟังก์ชั่น (ผลลัพธ์) ซึ่งใช้เพื่อรับข้อมูลที่ผ่านพื้นหลัง
วิธี ที่สี่ คือการระบุประเภทของข้อมูลที่จะได้รับ JSON หมายถึงการรับข้อมูล JSON และข้อความหมายถึงการรับสตรีม
ทั้งหมดที่ส่งคืนจากพื้นหลังคือราคารวมของผลิตภัณฑ์ทั้งหมดดังนั้นในฟังก์ชั่นก่อนอื่นเราจะได้รับองค์ประกอบของผลรวมย่อยผลิตภัณฑ์ทั้งหมดตาม ID และกำหนดค่าให้รวม TotalAll เป็นราคารวมที่มีการเพิ่มค่าขนส่ง tofixes หลัง (2) หมายความว่าสองสถานที่ทศนิยมจะถูกเก็บไว้ จากนั้นรับองค์ประกอบของผลรวมย่อยผลิตภัณฑ์เดียวและคำนวณผลรวมย่อยของผลิตภัณฑ์เดียว ด้วยวิธีนี้หน้าแผนกต้อนรับจะอัปเดตชิ้นส่วนที่เราต้องการอัปเดตโดยไม่ต้องโหลดซ้ำ นี่คือสิ่งที่อาแจ็กซ์มีประสิทธิภาพ นี่เป็นเช่นเดียวกับ EasyUI ก่อนหน้าซึ่งเป็นคำขอ AJAX
โอเคส่วน Ajax ได้รับการแนะนำที่นี่ ต่อไปนี้คือการประมวลผลพื้นหลังของคำขอตอนนี้ซึ่งเป็นโครงการของฉันเองและใช้เพื่อบันทึกความคืบหน้าของโครงการ
3. อัปเดตแบ็กเอนด์
การดำเนินการที่ร้องขอโดย AJAX ตอนนี้เป็นวิธีการอัปเดต () ใน SortEdAction ดังนั้นเราจึงไปที่ SorderAction เพื่อทำวิธีการอัปเดต () ให้เสร็จสมบูรณ์:
@Controller@Scope ("Prototype") Sorderaction คลาสสาธารณะขยาย baseaction <sorder> {สตริงสาธารณะ addsorder () {// ละเว้นรหัสที่ไม่เกี่ยวข้อง ... // อัปเดตปริมาณของผลิตภัณฑ์ตามหมายเลขผลิตภัณฑ์การอัปเดตสตริงสาธารณะ () // อัปเดตรายการช้อปปิ้งผลิตภัณฑ์ที่ผ่านเข้ามาจะถูกห่อหุ้มไว้ในโมเดล forder = sorderservice.updatesorder (รุ่น, forder); // คำนวณราคารวมใหม่ forder.settotal (forderservice.clutotal (forder)); session.put ("forder", forder); // ส่งคืนราคารวมใหม่ในรูปแบบของสตรีม inputStream = ใหม่ byteArrayInputStream (forder.getTotal (). toString (). getBytes ()); กลับ "สตรีม"; -วิธีการที่สอดคล้องกันในบริการได้รับการปรับปรุงดังนี้:
// sorderservice อินเตอร์เฟสสาธารณะ sorderservice ขยาย baseservice <order> {// บันทึกรหัสที่ไม่เกี่ยวข้อง ... // อัปเดตปริมาณผลิตภัณฑ์ตามรหัสผลิตภัณฑ์และปริมาณการอัพเดท Forder สาธารณะ Sorderservice {// ละเว้นรหัสที่ไม่เกี่ยวข้อง ... @Override Public Forder Updatesorder (Sorder Soorder, Forder Forder) {สำหรับ (Sorder Temp: forder.getSorders ()) {ถ้า (temp.getProduct (). getId () }} return forder; -ในที่สุดการกำหนดค่าในไฟล์ struts.xml คือการกำหนด "สตรีม" ให้กับ <sultultsult> ดังนี้
<global-results> <!-บันทึกการกำหนดค่าสาธารณะอื่น ๆ-> <name result = "stream" type = "stream"> <param name = "inputName"> inputStream </param>
โอเคตอนนี้ราคารวมที่คำนวณได้ในการดำเนินการสามารถส่งไปยังแผนกต้อนรับผ่านรูปแบบของสตรีมสามารถรับ Ajax ได้ในฟังก์ชั่นของมันทั้งหมดและเชื่อมต่อกับด้านหน้า
ลิงค์ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51487323
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น