كما كتبت من قبل ، عندما أكملت هذا العرض التوضيحي ، وجدت أن الجميع الآن لم يعد يستخدم Ajax لإكمال القائمة المشتركة. في الواقع ، فإن عرض المؤلف ليس لاستكمال هذا. اتجاه التعلم الرئيسي للمؤلف هو تطوير منطق الأعمال لخلفية Javaweb. ومع ذلك ، عند العمل في الخلفية ، لا تزال بحاجة إلى فهم بعض الواجهة الأمامية ، وخاصة تقنية تقديم البيانات غير المتزامن مثل Ajax ، يجب فهمها وإتقانها. لذا ، أستخدم قائمة متسلسلة هنا لممارسة تقديم Ajax غير المتزامن ، وبعد ذلك سأكتب العديد من العروض التوضيحية لنموذج التقديم غير المتزامن.
تستخدم خلفية المؤلف إطار عمل Spring+SpringMVC. لم يتم شرح هذا الجزء هنا ، فالتفوز على jQuery و Ajax.
أولاً ، قم بتنزيل المورد jQuery.js
رابط موقع jQuery الرسمي
ثانياً ، استيراد JQuery.js التي تم تنزيلها في المشروع
في مشروع Javaweb ، فقط ضعه في WebContent (يمكنك أيضًا إنشاء المجلد الخاص بك ، ولكن لا تضعه في ملف ويب في ملف)
ثالثًا ، ابدأ في كتابة رمز
إنشاء ملف JSP جديد
الرمز كما يلي
<٪@page import = "java.util.map" ٪> <٪@page import = "java.util.list" ٪> <٪@page language = "java" contentType = "text/html ؛ charset = utf-8" pageencoding = "utf-8" ٪> <! Transitional // en "" http://www.w3 انتقل إلى الواجهة الأمامية من الخلفية. يمكن فصله عن موضوع Ajax ، وليس هناك حاجة إلى إيلاء الكثير من الاهتمام-> <٪ قائمة <map <string ، Object >> listmap = (list <map <string ، object >>) request.getAttribute ("list") ؛ ٪> <select id = "class" onChange = "getStudent (this.value)"> <option value = "-1"> يرجى تحديد الفئة </orpue> <٪ لـ (int i = 0 ؛ i <listmap.size () ؛ i ++) {map <string ، object> map = listmap.get (i) ؛ ٪> <sirec ٪> </orpear> <٪} ٪> <!-حدد الفئة أولاً ، وبعد ذلك سيقوم خيار القائمة الثانية بمزامنة بيانات قاعدة بيانات الخلفية بشكل غير متزامن وفقًا للمحتوى المحدد ، وبالتالي تحديد خيارات القائمة الثانية-> </select> <!-القائمة الثانية ، حدد الاسم وفقًا للصف المحدد- -> <script type = "text/javaScript" src = "jQuery/jQuery-33.1.1.min.js"> </script> <!-استخدم ajax في jQuery لأداء التزامن غير متزامن (// الاستماع إلى التغير في الاختيار. من خلال تغيير عنصر التحكم هذا ، هذه الوظيفة $ ("#class"). تغيير (function () {// استدعاء ajax $ .ajax في jQuery ({// تعيين طريقة التقديم ، بشكل أساسي "get" و "post" type: إذا كنت بحاجة إلى استدعاء الموارد من المجالات الأخرى ، فيرجى حل عنوان URL للمشكلة عبر المجال: "ajax.html؟ className ="+$ ("#class"). val () ، // قم بتعيين تنسيق عودة الخلفية ، بشكل عام ، استخدم JSON مباشرة. لا يمكن تفويت هذه الجملة. خلاف ذلك ، عندما تقوم الخلفية بإرجاع البيانات ، لن تسمى طريقة النجاح نوع البيانات: "JSON" ، // عندما تقوم الخلفية بإرجاع البيانات بنجاح ، يتم استدعاء الطريقة. تمثل معلمة البيانات بيانات JSON التي تنسيقها Ajax في jQuery (في الواقع ، نحن بحاجة إلى تنسيقها يدويًا في Ajux غير Jquery ، وقد كتبت أيضًا طريقة JS Pure في التعليقات. طريقة تنسيق بيانات JSON في jquery هي النجاح: الوظيفة (البيانات) الخيار $ ("#name"). إلحاق ("<Potort> الرجاء تحديد الاسم </OPTION>") ؛ // حلقة من خلال البيانات بأكملها (بيانات JSON) ، وإضافة الخيار $ .each (البيانات ، الدالة (i ، n) {$ ("#name"). إلحاق (" <Potion> "+Data [i] .Name+" </point> ") ؛}) ؛}) ؛}) ؛}) ؛}) ؛}) ؛ </script> <!-طريقة التقديم لا تستخدم مكتبة jQuery (javs extive/jav ، لإضافة onchange إلى عنصر تحكم تحديد لاستدعاء هذه الطريقة ، ثم سيتم تخزين القيمة المحددة تلقائيًا في وظيفة متغير الاسم الفئة هذه getStudent (className) {if (className! = "-1") المعلمات باستخدام الطريقة المفتوحة. آخر صحيح يعني أنك تستخدم التقديم غير المتزامن ، والذي يمكن حذفه. القيمة الافتراضية هي trueRequest.open ("post" ، "ajax.html؟ className ="+className ، true) ؛ // إرسال طلب Ajax. function () {// ادعى أنه سيتم تنفيذ الخطوة التالية فقط إذا (request.ReadyState === 4) {// ادعم أن رمز الإرجاع لصفحة الويب هو 200 عندما يكون موافق ، انتقل إلى الخطوة التالية إذا (request.status === 200) {// تنسيق بيانات JSON Data var = json.parse (request.sponStext) ؛ document.getElementById ("name"). length ؛رابعًا ، مخطط التأثير النهائي
ما سبق هو تطوير Javaweb الذي قدمه لك المحرر. باستخدام jQuery و Ajax لتحقيق تأثيرات قائمة الارتباط الديناميكي. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!