Artikel ini membagikan operasi logout jFinal dan bootstrap untuk Anda, yang bertujuan untuk memperkenalkan cara memunculkan kotak konfirmasi logout melalui tag A, kemudian mengirim permintaan keluar ke jFinal, dan kemudian menyegarkan halaman tersebut. Kesulitan utama adalah dua poin berikut:
1. Jika kotak konfirmasi login muncul melalui konten tag a;
2. Cara menyegarkan halaman pop-up yang sesuai melalui tag.
1. Teknologi front-end
1. Bangun tag
Salin kode kode sebagai berikut: <a href = "$ {ctx}/mem/logout" target = "Ajaxtodo" callback = "ajaxdone" atitle = "Apakah Anda yakin ingin keluar?" id = "user_login_out" style = "padding: 0 6px;"> keluar </a>
Melihat:
1. Target = "Ajaxtodo", tentukan bahwa tag A adalah untuk memulai permintaan melalui Ajax.
2. Callback = "Ajaxdone", tentukan fungsi callback tag
3. Atitle = "Apakah Anda yakin ingin keluar?", Tentukan informasi konfirmasi
2. Inisialisasi Acara AJAX TAG
fungsi initUi (_box) {var $ p = $ (_ box || dokumen); // dwz.ajax.js if ($ .fn.Ajaxtodo) {$ ("a [target = ajaxtodo]", $ p) .Ajaxtodo (); }}Melihat:
1. Setelah pemuatan halaman selesai, jalankan metode initUI, sehingga tag A dengan target adalah Ajaxtodo memiliki metode Ajaxtodo yang ditentukan.
3. Permintaan AJAX untuk sebuah tag
fungsi ajaxtodo (url, callback) {var $ callback = callback; if (! $. isFunction ($ callback)) {$ callback = eval ('(' + callback + ')'); } var forwardUrl = window.location.href; if (url.indexof ("?")! = -1) {url + = "& forwardUrl =" + forwardUrll; } else {url + = "? ForwardUrll =" + ForwardUrl; } $ .Ajax ({type: 'Post', URL: URL, DataType: "json", cache: false, Success: $ callback, kesalahan: yunm.ajaxerror});}Melihat:
1. ForwardUrl mencatat halaman logged out
4. Tambahkan metode Ajaxtodo ke objek jQuery
$ .fn.extend ({Ajaxtodo: function () {return this.each (function () {var $ this = $ (this); $ this.click (function (event) {var url = unescape ($ this.attr ("href"). (! $ this.attr ("callback")); },});5. Fungsi Callback
function ajaxdone (json) {yunm.ajaxdone (json); if (json [yunm.keys.statuscode] == yunm.statuscode.ok || json [yunm.keys.statuscode] == yunm.statuscode.info) {// jika halaman setelah transfer ditentukan, putar if (json.forwardurl) {location.href = jorfor (json. }}}6. Kotak Konfirmasi WeeBox muncul
$ .showConfirm = function (str, funcok, funcclose) {var okfunc = function () {$ .weeBoxs.close ("yunm_confirm_box"); funcok.call (); }; $ .weeBoxs.open (str, {boxid: 'yunm_confirm_box', contentType: 'Text', showbutton: true, showcancel: true, showok: true, judul: 'konfirmasi', lebar: 280, type: 'wee', onopen: function () {init_Ui_button (); });}; fungsi init_ui_button () {$ ("button.ui-button [init! = 'init']"). masing-masing (fungsi (i, o) {$ (o) .attr ("init", "init"); // untuk mencegah inisialisasi berulang $ (o) .Ui_button ();});2. Teknologi JFinal
public void logout () {if (getSession (). getAttribute ("username")! = null) {// clear sesi getSession (). RemoveAttribute ("UserName"); } Ajaxdonesuccess ("Login berhasil!"); renderjson ();}Tambahkan metode logout.
Memengaruhi:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini. Saya harap semua orang dapat mulai menerapkan kotak konfirmasi sistem keluar bootstrap + jFinal. Saya harap semua orang menyukai artikel ini dan terima kasih telah membaca.