บทความนี้แบ่งปันการดำเนินการออกจากระบบของ JFINAL และ BOOTSTRAP สำหรับคุณโดยมีจุดประสงค์เพื่อแนะนำวิธีการปรากฏกล่องยืนยันการออกจากระบบผ่านแท็ก A จากนั้นส่งคำขอออกไปยัง JFINAL แล้วรีเฟรชหน้า ปัญหาหลักคือสองจุดต่อไปนี้:
1. หากกล่องยืนยันการเข้าสู่ระบบปรากฏขึ้นผ่านเนื้อหาของแท็ก A;
2. วิธีรีเฟรชหน้าป๊อปอัพที่เกี่ยวข้องผ่านแท็ก A
1. เทคโนโลยีส่วนหน้า
1. สร้างแท็ก
คัดลอกรหัสรหัสดังต่อไปนี้: <a href = "$ {ctx}/mem/logout" target = "ajaxtodo" callback = "ajaxdone" atitle = "คุณแน่ใจว่าต้องการออกหรือไม่" id = "user_login_out" style = "padding: 0 6px;"> ออก </a>
สังเกต:
1. target =” ajaxtodo” ระบุว่าแท็กคือการเริ่มต้นคำขอผ่าน AJAX
2. callback =” ajaxdone” ระบุฟังก์ชันการโทรกลับแท็ก
3. atitle = "คุณแน่ใจหรือไม่ว่าต้องการออก?" ระบุข้อมูลการยืนยัน
2. เริ่มต้นเหตุการณ์แท็กอาแจ็กซ์
ฟังก์ชั่น initui (_box) {var $ p = $ (_ box || เอกสาร); // dwz.ajax.js ถ้า ($ .fn.ajaxtodo) {$ ("A [target = ajaxtodo]", $ p) .ajaxtodo (); -สังเกต:
1. หลังจากการโหลดหน้าเสร็จสมบูรณ์ให้ดำเนินการวิธีการเริ่มต้นเพื่อให้แท็ก A พร้อมเป้าหมายคือ Ajaxtodo มีวิธี Ajaxtodo ที่ระบุ
3. คำขอ AJAX สำหรับแท็ก
ฟังก์ชั่น ajaxtodo (url, callback) {var $ callback = callback; if (! $. isfunction ($ callback)) {$ callback = eval ('(' + callback + ')'); } var forwardUrl = window.location.href; if (url.indexof ("?")! = -1) {url + = "& forwardUrl =" + forwardUrl; } else {url + = "? forwardUrl =" + forwardUrl; } $ .ajax ({type: 'post', url: url, datatype: "json", แคช: เท็จ, ความสำเร็จ: $ callback, ข้อผิดพลาด: yunm.ajaxerror});}สังเกต:
1. ForwardURL เข้าสู่ระบบหน้า Logged Out
4. เพิ่มวิธี Ajaxtodo ไปยังวัตถุ jQuery
$ .fn.extend ({ajaxtodo: function () {return this.each (function () {var $ this = $ (this); $ this.click (ฟังก์ชั่น (เหตุการณ์) {var url = Unsescape ($ this.attr ("href")) (! $ this.attr ("การโทรกลับ")); -5. ฟังก์ชั่นการโทรกลับ
ฟังก์ชั่น ajaxdone (json) {yunm.ajaxdone (json); if (json [yunm.keys.statuscode] == yunm.statuscode.ok || json [yunm.keys.statuscode] == yunm.statuscode.info) {// ถ้าหน้าหลังจากการถ่ายโอนถูกระบุ -6. กล่องยืนยัน WeeBox ปรากฏขึ้น
$ .ShowConfirm = ฟังก์ชั่น (str, funcok, funcclose) {var okfunc = function () {$ .weeboxs.close ("yunm_confirm_box"); funcok.call (); - $ .WEEBOXS.OPEN (str, {BoxId: 'yunm_confirm_box', contentType: 'ข้อความ', Showbutton: จริง, Showcancel: จริง, Showok: จริง, ชื่อเรื่อง: 'ยืนยัน', กว้าง: 280, ประเภท: });}; ฟังก์ชั่น init_ui_button () {$ ("button.ui-button [init! = 'init']"). แต่ละ (ฟังก์ชั่น (i, o) {$ (o) .attr ("init", "init"); // เพื่อป้องกันการเริ่มต้นซ้ำของ $ (o) .ui_button ();2. Jfinal Technology
โมฆะสาธารณะ logout () {ถ้า (getSession (). getAttribute ("ชื่อผู้ใช้")! = null) {// ล้างเซสชัน getSession (). RemoveAttribute ("ชื่อผู้ใช้"); } ajaxdonesuccess ("เข้าสู่ระบบสำเร็จ!"); renderjson ();}เพิ่มวิธีการออกจากระบบ
ผล:
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่าทุกคนจะเริ่มใช้กล่องยืนยันระบบ Bootstrap + JFinal Exit ฉันหวังว่าทุกคนจะชอบบทความนี้และขอบคุณสำหรับการอ่าน