لقد نشرت المشروع ولعبته. لقد قمت اليوم بتحسين وظيفة تعديل كمية المنتجات في عربة التسوق لتحديث السعر الإجمالي المقابل جزئيًا. يعلم الجميع أنه يجب تنفيذ هذا مع أياكس. لم أتعلم AJAX من قبل ، وحدثت فقط لاستخدام هذه الوظيفة الصغيرة لتعلم المعرفة Ajax ببساطة.
1. تحليل المشكلة
دعونا نلقي نظرة على الموقف على الصفحة:
الوظيفة على النحو الوارد أعلاه. قبل عدم توفر Ajax ، عادةً ما تبحث عن إجراء استنادًا إلى القيمة المعدلة للمستخدم ، ثم العودة إلى صفحة JSP الجديدة لإعادة تحميل الصفحة بأكملها لإكمال تحديث الأرقام. ولكن مع تقنية Ajax ، يمكننا استخدام تقنية Ajax لتحديث التغييرات جزئيًا على المكان الذي نريد تغييره ، بدلاً من إعادة تحميل الصفحة بأكملها. أولاً ، دعونا نلقي نظرة على رمز جزء JSP الذي يتوافق مع الصورة أعلاه:
<viv> <!-عربة التسوق-> <div id = "shoop_cart"> <viv> عربة التسوق الخاصة بي </div> <table cellpadding = "0" cellpacing = "0"> <tr> <th> رقم المنتج </th> <th colspan = "2"> اسم المنتج </th> </th> <th> </tr> <c: foreach عناصر = "$ {sessionscope.forder.sorders}" var = "sorder" varStatus = "num" src = "$ {shop}/files/$ {sorder.product.pic}"/> </td> <td> <a href = "#"> $ {sorder.name} </a> </td> <td> $ {sorder.price} </td> <td> <td> value = "$ {sorder.number}" lang = "$ {sorder.number}"> </td> <td> $ {sorder.price*sorder.number} </td> <td> <td> <a href = "#"> </a> </td> </tr> <c: id = "totals table"> <tbody> <tr> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = ""> <strong> ￥ <span id = "Total"> $ {td sessionscope.forder.total} </span> </strong> colspan = "1"> الشحن </td> <td style = ""> ￥ <span id = "yunfei"> 0.00 </span> </td> </tr> <tr> <td colspan = "1"> <strong> المجموع </strong> </td> <td style = "" " id = "totalall"> <strong> $ {sessionscope.forder.total} </strong> </span> </td> </tbod تأكيد <//button> </a> </font> <font> <a href = "#"> <button type = "button"> <font> قم بمسح العربة </font> </utton> </font> <a href = "$ {shop}/idex.jsp"> <button> <font> style = "clear: كلاهما"> </div> </viv> </viv> </viv> </viv> </viv> </viv> </viv>يبدو الكثير ، لكن الوظيفة بسيطة للغاية. يأخذ فقط البيانات المقابلة من المجال لعرضها. إذا أردنا تنفيذ الوظائف الموضحة أعلاه ، فلنحلل الأفكار أولاً:
أولاً ، يجب عليك تسجيل حدث: أي أن الحدث الناجم عن مربع النص في الرقم يتم تعديله ؛
في هذا الحدث ، نحصل على إدخال الرقم من قبل المستخدم ونحكم على شرعية المدخلات ، لأنه يجب علينا منع المستخدم من الدخول بشكل عشوائي ؛
إذا كانت قانونية ، أرسل البيانات إلى الخلفية عبر طلب AJAX ؛
تستدعي الخلفية طريقة منطق الأعمال المقابلة للحصول على نتائج جديدة لرقم جديد وإعادتها إلى المقدمة من خلال الدفق ؛
بعد أن يتلقى Ajax النتيجة ، يقوم بتحديث البيانات في الموقع المقابل. انتهت العملية برمتها.
إذا كان غير قانوني ، يتم عرض الرقم قبل التعديل. لم يتم علاج
2. تنفيذ طلبات AJAX
بعد تحليل العملية ، سنبدأ في تنفيذها. أولاً ، الصق رمز جزء JS هنا ، ثم نقوم بتحليله بالتفصيل بناءً على العملية أعلاه:
<script type = "text/javaScript"> $ (function () {// 1. سجل الحدث $ (". text"). تغيير (function () {// 2. تحقق من صحة الرقم var data = this.value ؛ && number> 0) {// إذا كان ذلك قانونيًا ، فقد تم تحديثه بشكل متزامن $ (هذا). معرف المنتج ، وإرجاع السعر الإجمالي بعد الكمية المعدلة $ .post ("sorder_updatesorder.action" ، {number ، 'product.id': pid} ، function (total) {$ ("#total"). html (total) ؛ $ ("#totalall"). // احسب المجموع الفرعي لمنتج واحد ، مع الاحتفاظ بمساعدين عشريين var = ($ (this) .parent (). $ (هذا) .parent (). التالي (). html (السعر) ؛ } آخر {// إذا كان غير قانوني ، استعد إلى الرقم القانوني هذا. }})})}) </script>2.1 حدث التسجيل
يمكننا أن نرى أنه يجب أولاً وضع حدث التسجيل في مربع النص هذا. هنا يتم وضعه من خلال محدد الفصل. نظرًا لأنه مربع نص ، يتم استخدام التغيير () لتسجيل الحدث ، ثم تحديد وظيفة الدالة () في معالجة الحدث.
2.2 احكم على شرعية البيانات
حسنًا ، بعد تسجيل الحدث ، يجب علينا أولاً إصدار حكم على شرعية الرقم الذي أدخله المستخدم ، لأن المستخدم قد يدخل 0 أو أرقام سلبية ، قد يدخل العشرية ، أو حتى الحروف أو الأحرف الأخرى ، وما إلى ذلك. وبالتالي ، فإن التحقق مطلوب. Isnan (الرقم) يعني أنه إذا لم يكن الرقم رقمًا ، فإنه يعيد صحيحًا. يمكننا استخدام هذه الوظيفة لتحديد ما إذا كان رقمًا ؛ Parseint (الرقم) يعني تقريب المصفوفة ثم مقارنته مع نفسه. نستخدم هذا بذكاء لتحديد ما إذا كان الرقم صحيحًا.
2.3 إرسال طلب AJAX
إذا كانت البيانات قانونية ، بعد الحصول على البيانات ، يمكننا إرسال طلب Ajax إلى الخلفية. نحن بحاجة إلى النظر في سؤال: ما هي المعلمات التي نحتاج إلى تمريرها؟ بادئ ذي بدء ، إذا أراد المستخدم تحديث الكمية ، فلا شك أنه يجب نقل الأرقام التي أدخلها المستخدم. ثانياً ، ما هو المنتج الذي يجب أن ينتقل؟ بمعنى آخر ، نحتاج إلى الحصول على رقم معرف المنتج الذي يريد المستخدم تعديله. بعد معرفة المعلمات المراد نقلها ، يمكننا إيجاد طريقة للحصول على رقم المعرف.
هناك سؤال هنا. قد يكون لدى المستخدمين أكثر من منتج واحد في عربة التسوق الخاصة بهم. بطبيعة الحال ، سوف يعتقدون أنه سيكون من الرائع أن يتمكنوا من الحصول على معرف المنتجات المختلفة ببيان. لذلك ، فكروا في استخدام العلامة الأصل لمربع النص. نظرًا لأن علامات الأصل الخاصة بالمنتجات المختلفة هي نفسها ، فهي أول علامات <tr> ، لذلك نضع معرف المنتج في سمة Lang في علامة <tr> ، لماذا نضعه في سمة Lang؟ نظرًا لعدم استخدام سمة Lang بشكل أساسي ، يتم استخدامها لتحديد اللغات ، واستخدام سمة Lang ليس من السهل التعارض مع سمات أخرى ~ وبهذه الطريقة ، يمكننا الحصول على معرف المنتج من خلال $ (هذا) .Parents ("tr: first"). att ("lang") ؛
بعد ذلك ، ابدأ في إرسال طلبات Ajax ، وإرسالها باستخدام طريقة Post. هناك أربعة معلمات في طريقة البريد:
المعلمة الأولى هي الإجراء الذي سيتم إرساله إلى
المعلمة الثانية هي المعلمة التي سيتم تمريرها ، باستخدام تنسيق JSON
المعلمة الثالثة هي دالة (نتيجة) ، والتي تستخدم لتلقي البيانات التي تمر عبر الخلفية.
الطريقة الرابعة هي تحديد نوع البيانات التي سيتم استلامها. JSON تعني تلقي بيانات JSON ، والنص يعني استلام الدفق
الإجمالي الذي تم إرجاعه من الخلفية هو السعر الإجمالي لجميع المنتجات ، لذلك في الوظيفة ، أولاً ، نحصل على عناصر جميع المجاملات الفرعية للمنتجات بناءً على المعرف وتعيين القيمة إلى المجموع. Totalall هو السعر الإجمالي مع إضافة الشحن. tofixes الأخير (2) يعني الاحتفاظ بمكانين عشريين. ثم احصل على عنصر نطاق فرعي لمنتج واحد وحساب المجموع الفرعي لمنتج واحد. وبهذه الطريقة ، تقوم صفحة مكتب الاستقبال بتحديث الجزء الذي نريد تحديثه دون إعادة التحميل. هذا هو الجزء القوي من أياكس. هذا هو نفس easyui السابق ، وهو أيضًا طلب من أياكس.
حسنًا ، يتم تقديم جزء Ajax هنا. فيما يلي معالجة الخلفية للطلب الآن ، وهو لمشروعي الخاص ويستخدم لتسجيل تقدم المشروع.
3. تحديث الخلفية
الإجراء الذي طلبته AJAX الآن هو طريقة expratesorder () في SortEdAction ، لذلك نذهب إلى SorderAction لإكمال طريقة التحديثات ():
@Controller@Scope ("OrityType") تمتد الفئة العامة SorderAction على BaseAction <Sorder> {public string addsorder () {// حذف الرمز غير المهم ... // قم بتحديث عنصر التسوق ، يتم تغليف المنتج. // حساب السعر الإجمالي الجديد forder.settotal (forderservice.clutotal (forder)) ؛ Session.put ("forder" ، forder) ؛ // إرجاع السعر الإجمالي الجديد في شكل دفق inputStream = جديد bytearrayinputStream (forder.getTotal (). toString (). getBytes ()) ؛ إرجاع "دفق" ؛ }}يتم تحسين الطرق المقابلة في الخدمة على النحو التالي:
. ينفذ sorderservice {// حذف الكود غير ذي صلة ... Override public forder updatesorder (sorder sooder ، forder forder) {for (sorder temp: forder.getsorders ()) {if (temp.getProduct (). }} العودة forder ؛ }}أخيرًا ، فإن التكوين في ملف struts.xml هو تعيين "دفق" إلى <global-result> ، على النحو التالي
<global-results> <!-احفظ التكوينات العامة الأخرى-> <result name = "dream" type = "dream"> <param name = "inputName"
حسنًا ، يمكن الآن نقل السعر الإجمالي المحسوب في الإجراء إلى مكتب الاستقبال من خلال شكل دفق ، ويمكن استلام Ajax في وظيفته ، ووضعها في المجموع ، وتوصيلها إلى الأمام.
الرابط الأصلي: http://blog.csdn.net/eson_15/article/details/51487323
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.