Seperti yang saya tulis sebelumnya, ketika saya menyelesaikan demo ini, saya menemukan bahwa sekarang semua orang tidak lagi menggunakan Ajax untuk menyelesaikan menu bersama. Faktanya, demo penulis bukan untuk menyelesaikan ini. Arah pembelajaran utama penulis adalah pengembangan logika bisnis dari latar belakang Javaweb. Namun, ketika bekerja di latar belakang, Anda masih perlu memiliki pemahaman tentang front-end, terutama teknologi pengiriman data asinkron seperti AJAX perlu dipahami dan dikuasai. Jadi di sini saya menggunakan menu gabungan untuk mempraktikkan pengiriman asinkron jax, dan kemudian saya akan menulis beberapa demo dari formulir pengiriman asinkron.
Latar belakang penulis menggunakan kerangka kerja pegas+springmvc. Bagian ini tidak dijelaskan di sini, fokusnya adalah pada JQuery dan Ajax.
Pertama, unduh sumber daya jQuery.js
Tautan situs web resmi jQuery
Kedua, impor jQuery.js yang diunduh ke dalam proyek
Dalam proyek Javaweb, cukup letakkan di webcontent (Anda juga dapat membuat folder Anda sendiri, tetapi jangan masukkan ke dalam file web-inf)
Ketiga, mulailah menulis kode
Buat file JSP baru
Kodenya adalah sebagai berikut
<%@page Impor = "java.util.map"%> <%@page impor = "java.util.list"%> <%@page bahasa = "java" contentType = "text/html; charset = utf-8" pageenCoding = "UTF-8"%> <! Doctype html public "-/ig-engah"-w3 ht/uTf-8 "%> <! Doctype html public"-–/–//uTf-8 "doctype html html public"-–/–///uTf-8 "doctype html html public" –/–/–//uTF-8 " "http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equal =" tipe-konten "konten =" Teks/html; charset = UTF-8 "> <title> tes AJAX </title> </head-head dari The Body> This is the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the Code uji uji </html uji </ht/ht/ht/ht/ht/html dari the laman> latar belakang. Ini dapat dipisahkan dari topik AJAX, dan tidak perlu terlalu memperhatikan-> <%daftar <peta <string, objek >> listMap = (daftar <peta <string, objek >>) request.getAttribute ("Daftar"); %> <pilih id = "class" onchange = "getStudent (this.value)"> <option value = "-1"> Pilih kelas </pection> <%for (int i = 0; i <listMap.size (); i ++) {peta <string, object> peta = listMap.get (i);%> <%> <%= peta, peta, peta = "clash". %> </option> < %} %> <!-Pilih kelas terlebih dahulu, dan kemudian opsi menu kedua akan menyinkronkan data basis data latar belakang secara tidak sinkron sesuai dengan konten yang dipilih, sehingga mengatur opsi menu kedua-> </pilih> <!-menu jum, tentukan name sesuai dengan kelas yang dipilih-> <pilih ID = "name"> Pilihan Kelas First> -> <script type = "text/javascript" src = "jQuery/jQuery-3.1.1.min.js"> </script> <!-Gunakan Ajax di jQuery untuk melakukan sinkronisasi tidak sinkron dengan Kontrol ini dengan Kontrol ini dengan Kontrol dengan Kelas///Klasiones. Kontrol Perubahan, fungsi ini $ ("#class"). ubah (function () {// hubungi Ajax $ .Ajax di jQuery ({// Atur metode pengiriman, terutama "get" dan "post" tipe: "p ost", // atur URL yang dikirimkan, Anda hanya dapat memilih yang lokal di sini. Jika Anda perlu menghubungi sumber daya dari domain lain, silakan Google untuk menyelesaikan URL masalah lintas-domain: "Ajax.html? ClassName ="+$ ("#class"). Val (), // Atur format pengembalian latar belakang, umumnya gunakan JSON secara langsung. Kalimat ini tidak bisa dilewatkan. Kalau tidak, ketika latar belakang mengembalikan data, metode keberhasilan tidak akan disebut datape: "json", // Ketika latar belakang berhasil mengembalikan data, metode ini dipanggil. Parameter data mewakili data JSON yang diformat oleh Ajax di jQuery (pada kenyataannya, kita perlu memformatnya secara manual di Ajax non-JQuery, dan saya juga menulis metode JS murni dalam komentar. Metode pemformatan data JSON dengan nama jQuery adalah parse) keberhasilan: function (data) {// hapus kontrol terpilih dengan nama ID $ ("#Parse): function (data) {// hapus kontrol terpilih dengan nama id $ ("#" opsi $ ("#name"). append ("<pection> silakan pilih nama </pection>"); // loop melalui seluruh data (data json), dan tambahkan opsi $ .each (data, fungsi (i, n) {$ ("#name"). append (" <pection> "+data [i] .name+" </tiption> ");});});});});});}); </script> <!-Metode pengiriman tidak menggunakan pustaka jQuery (ini, o. Onchange ke kontrol pilih untuk memanggil metode ini, dan kemudian nilai yang dipilih akan secara otomatis disimpan dalam fungsi variabel className ini GetStudent (className) {if (className! = "-1") {// Gunakan xmlhttprible Metode ini sebenarnya digunakan dalam jQuery di atas, tetapi kami telah berkecimpahan var reruntuhan = Metode ini benar-benar digunakan pada jQuery di atas, tetapi kami telah telah berkemampuan VAR OPERPERED = New Rever = H) metode. Yang benar berarti Anda menggunakan pengiriman asinkron, yang dapat dihilangkan. Nilai defaultnya adalah truerequest.open ("post", "ajax.html? Classname ="+classname, true); // Kirim permintaan jax. function () {// menilai bahwa langkah selanjutnya akan dilakukan hanya jika (request.readystate === 4) {// menilai bahwa kode pengembalian halaman web adalah 200 ketika ok, lanjutkan ke langkah berikutnya jika (request.status === 200) {// format data json var vari = json. document.geteLementById ("name"). length; i ++) {document.geteLementById ("name"). Remove (document.geteLementById ("name"). Opsi [i]);} document.getElementById ("name"). Tambah (data baru (0]Keempat, diagram efek akhir
Di atas adalah pengembangan Javaweb yang diperkenalkan editor kepada Anda. Menggunakan JQuery dan AJAX untuk mencapai efek menu tautan dinamis. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!