Saya telah menggunakan proyek dan memainkannya. Hari ini saya telah meningkatkan fungsi memodifikasi jumlah produk dalam keranjang belanja untuk memperbarui sebagian harga total yang sesuai. Semua orang tahu bahwa ini harus diimplementasikan dengan Ajax. Saya belum pernah belajar AJAX sebelumnya, dan saya kebetulan menggunakan fungsi kecil ini untuk hanya belajar pengetahuan Ajax.
1. Analisis masalah
Mari kita lihat situasi di halaman:
Fungsinya seperti di atas. Sebelum AJAX tidak tersedia, Anda biasanya mencari tindakan berdasarkan nilai yang dimodifikasi pengguna, dan kemudian kembali ke halaman JSP baru untuk memuat ulang seluruh halaman untuk menyelesaikan pembaruan angka. Tetapi dengan teknologi AJAX, kita dapat menggunakan teknologi AJAX untuk menyegarkan sebagian perubahan pada tempat yang ingin kita ubah, alih -alih memuat ulang seluruh halaman. Pertama, mari kita lihat kode bagian JSP yang sesuai dengan gambar di atas:
<div> <!-- Shopping Cart--> <div id="shopping_cart"> <div>My Shopping Cart</div> <table cellpadding="0" cellpacing="0"> <tr> <th>Product Number</th> <th colspan="2">Product Name</th> <th>Sales Price</th> <th>Quantity</th> <th>Subtotal</th> <th>Delete</th> </tr> <c: item foreach = "$ {sesionscope.forder.sorders}" var = "SORDER" varStatus = "num"> <tr lang = "$ {SOERDER.Product.id}"> <td> <a href = "#"> $ {num.count} </a> </td> </td </td> <"$ {num.count} </a> </td> </td </td> <" $ {num.count} </a> </td> </td </td> <"$ {num.count} </a> </a> src = "$ {shop}/file/$ {sorder.product.pic}"/> </td> <td> <a href = "#"> $ {SOERDER.NAME} </a> </td> <td> $ {SORDER.PRICE} </td> </td> <td> $ {SORDER.PRICE} </td> <td> <! " value = "$ {SORDER.NUMBER}" lang = "$ {SORDER.NUMBER}"> </td> <td> $ {SOERDER.PRICE*SOERDER.NUMBER} </td> <td> <a href = "#"> </a> </td> </TR> </C: C: Cek! id = "Total-Table"> <tbody> <tr> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = ""> <strong> ￥ <span id = "total"> $ {sesionscope.forder.total} </span> </strong> </td> </td> colspan = "1"> FREIGHT </td> <td style = ""> ￥ <span id = "yunfei"> 0,00 </span> </td> </tr> <tr> <td colspan = "1"> <strong> total </strong> </td> <td style = "> ￥ ￥ id = "TotalAll"> <strong> $ {sesionscope.forder.total} </strong> </span> </td> </tr> </tbody> </bojle> <vont> <font> <a href = "$ {shop} /user/confirm.jsp"> <a href = "$ {shop} /user/confirm.jsp"> <a typon = "latar belakang =" latar belakang " Konfirmasi </button> </a> </font> <font> <a href = "#"> <tombol type = "tombol"> <font> Hapus keranjang </font> </button> </font> <a href = "$ {shop} /index.jsp"> <button type = "Tombol"> <font> <font> Perlombaan/Perlindungan /index.jsp "> <buteT ="> <font> <font> SELANAIN/BANAH style = "clear: keduanya"> </div> </div> </div> </div> </div> </div> </div> </div>Sepertinya banyak, tetapi fungsinya sebenarnya sangat sederhana. Itu hanya mengeluarkan data yang sesuai dari domain untuk menampilkannya. Jika kita ingin mengimplementasikan fungsi yang dijelaskan di atas, mari kita analisis ide terlebih dahulu:
Pertama, Anda harus mendaftarkan suatu acara: yaitu, acara yang dipicu oleh kotak teks dalam nomor dimodifikasi;
Dalam acara ini, kami mendapatkan input nomor oleh pengguna dan menilai legalitas input, karena kami harus mencegah pengguna masuk secara acak;
Jika legal, kirim data ke latar belakang melalui permintaan AJAX;
Latar belakang memanggil metode logika bisnis yang sesuai untuk mendapatkan hasil baru untuk nomor baru dan mengembalikannya ke latar depan melalui aliran;
Setelah AJAX menerima hasilnya, ia memperbarui data di lokasi yang sesuai. Seluruh proses sudah berakhir.
Jika ilegal, nomor sebelum modifikasi ditampilkan. Tidak ada pengobatan yang dilakukan
2. Implementasi permintaan AJAX
Setelah menganalisis prosesnya, kami akan mulai mengimplementasikannya. Pertama, tempel kode bagian JS di sini, dan kemudian kami menganalisisnya secara rinci berdasarkan proses di atas:
<type script = "Text/JavaScript"> $ (function () {// 1. Register event $ (". Teks"). Ubah (function () {// 2. Verifikasi validitas data var nomor = this.value; // Anda juga dapat menggunakan $ (ini) .val (); // iSnan (angka) berarti jika angka bukan angka, nomornya, nomornya, nomor & nomornya, number & number (). && 0) {// Jika legal, nomor yang diperbarui secara serentak $ (ini) .attr ("lang", angka); id of the product, and return the total price after the modified quantity $.post("sorder_updateSorder.action", {number:number, 'product.id':pid}, function(total){ $("#total").html(total); //Subtotal of all products var yunfei = $("#yunfei").html(); $ ("#totalAll"). html ((total*1 + yunfei*1) .tofixed (2)); // Hitung subtotal dari satu produk, mempertahankan dua tempat desimal var harga = ($ (ini) .parent (). Prev (). Html ()*angka) .tofixed (2); $ (ini) .parent (). next (). html (harga); } else {// Jika ilegal, kembalikan ke nomor yang hanya legal this.value = $ (ini) .attr ("lang"); }})})}) </skrip>2.1 Acara Pendaftaran
Kita dapat melihat bahwa acara pendaftaran harus terlebih dahulu diposisikan ke kotak teks ini. Di sini diposisikan melalui pemilih kelas. Karena ini adalah kotak teks, ubah () digunakan untuk mendaftarkan acara, dan kemudian mendefinisikan fungsi fungsi () di dalamnya untuk menangani acara tersebut.
2.2 Tentukan legalitas data
OK, setelah mendaftarkan acara tersebut, pertama -tama kita harus membuat penilaian pada legalitas nomor yang dimasukkan oleh pengguna, karena pengguna dapat memasukkan 0 atau angka negatif, dapat memasukkan desimal, atau bahkan huruf atau karakter lain, dll. Jadi verifikasi diperlukan. isnan (angka) berarti bahwa jika angka bukan angka, itu mengembalikan true. Kita dapat menggunakan fungsi ini untuk menentukan apakah itu angka; Parseint (angka) berarti membulatkan array dan kemudian membandingkannya dengan dirinya sendiri. Kami dengan cerdik menggunakan ini untuk menentukan apakah angka adalah bilangan bulat.
2.3 Kirim Permintaan AJAX
Jika data legal, setelah kami mendapatkan data, kami dapat mengirim permintaan AJAX ke latar belakang. Kita perlu mempertimbangkan pertanyaan: parameter apa yang perlu kita lewati? Pertama -tama, jika pengguna ingin memperbarui kuantitas, tidak ada keraguan bahwa angka -angka yang dimasukkan oleh pengguna harus ditransmisikan. Kedua, produk mana yang harus ditransmisikan? Dengan kata lain, kita perlu mendapatkan nomor ID dari produk yang ingin dimodifikasi pengguna. Setelah mengetahui parameter yang akan ditransmisikan, kami dapat menemukan cara untuk mendapatkan nomor ID.
Ada pertanyaan di sini. Pengguna mungkin memiliki lebih dari satu produk di keranjang belanja mereka. Secara alami, mereka akan berpikir bahwa akan lebih bagus jika mereka bisa mendapatkan ID dari berbagai produk dengan pernyataan. Oleh karena itu, mereka berpikir untuk menggunakan tag induk dari kotak teks. Karena tag induk dari produk yang berbeda adalah sama, mereka adalah tag <tr> pertama, jadi kami meletakkan ID produk di atribut Lang di tag <tr>, mengapa memasukkannya ke dalam atribut Lang? Karena atribut Lang pada dasarnya tidak digunakan, digunakan untuk mendefinisikan bahasa, dan menggunakan atribut Lang tidak mudah untuk bertentangan dengan atribut lain ~ dengan cara ini, kita dapat memperoleh ID produk melalui $ (ini). Parents ("tr: pertama"). Attr ("lang");
Selanjutnya, mulailah mengirim permintaan AJAX, mengirimnya menggunakan metode POST. Ada empat parameter dalam metode POST:
Parameter pertama adalah tindakan yang akan dikirim
Parameter kedua adalah parameter yang akan dilewati, menggunakan format JSON
Parameter ketiga adalah fungsi (hasil), yang digunakan untuk menerima data yang melewati latar belakang.
Metode keempat adalah menentukan jenis data apa yang akan diterima. JSON berarti menerima data JSON, dan teks berarti menerima aliran
Total yang dikembalikan dari latar belakang adalah harga total semua produk, jadi dalam fungsi, pertama -tama kita mendapatkan elemen dari semua subtotal produk berdasarkan ID dan menetapkan nilainya ke total. TotalAll adalah total harga dengan barang yang ditambahkan. Tofix yang terakhir (2) berarti bahwa dua tempat desimal dipertahankan. Kemudian dapatkan elemen subtotal produk tunggal dan hitung subtotal produk tunggal. Dengan cara ini, halaman meja depan memperbarui bagian yang ingin kami perbarui tanpa memuat ulang. Inilah yang kuat Ajax. Ini sama dengan easyui sebelumnya, yang juga merupakan permintaan AJAX.
Oke, bagian Ajax diperkenalkan di sini. Berikut ini adalah pemrosesan latar belakang permintaan sekarang, yang untuk proyek saya sendiri dan digunakan untuk merekam kemajuan proyek.
3. Pembaruan Backend
Tindakan yang diminta oleh AJAX sekarang adalah metode pembaruan () dalam sortedaksi, jadi kami pergi ke Sorderaction untuk menyelesaikan metode pembaruan ():
@Controller@scope ("ProtoType") Public Class Sorderaction memperluas basa <sherder> {public string addSorder () {// menghilangkan kode yang tidak relevan ... // perbarui jumlah produk sesuai dengan nomor produk pembaruan string publik () {forder forder = (forder) session.get ("forder"); // Perbarui item belanja, produk.id lewat di dikotori ke dalam model forder = sorderService.updatesorder (model, forder); // Hitung total harga baru FORDER.SetTotal (Forderservice.clutotal (FORDER)); session.put ("FORDER", FORDER); // Kembalikan total harga baru dalam bentuk stream inputStream = bytearrayInputStream baru (forder.getTotal (). Tostring (). GetBytes ()); mengembalikan "stream"; }}Metode yang sesuai dalam layanan ditingkatkan sebagai berikut:
// Antarmuka SorderService Antarmuka Publik SorderService Memperluas Baseservice <Sherder> {// Simpan kode yang tidak relevan ... // Perbarui Kuantitas Produk Menurut ID Produk dan Kuantitas Pembaruan Public FORDER (SORDER SOORDER, FORDER FORDER); SORDERSERVICEICEICS COURDERVICEICS POCKERS POCKERSEVICLEIMPL Kelas @Service ("sorderService" sorderservice sorder corderserviceMpl @service ("sorderService" sorderservice @service ("sorderService (" sorderService ("sorderservice" sorderserviceMpl @service ("sorderService" Menerapkan sorderService {// hilangkan kode yang tidak relevan ... @Override Public FORDER UPDATEDORDER (SORDER SOORDER, FORDER FORDER) {for (SORDER TEMP: FORDER.GETSORDERS ()) {if (Temp.getProduct (). GetId (). Equals (SORDER.GETPRODUK (). }} return fonder; }}Akhirnya, konfigurasi dalam file struts.xml adalah untuk menetapkan "stream" ke <lobal-result>, sebagai berikut
<Global-RESULTS> <!-Simpan konfigurasi publik lainnya-> <result name = "stream" type = "stream"> <param name = "inputName"> inputStream </param> </result> </global-results>
Oke, sekarang harga total yang dihitung dalam aksi dapat ditransmisikan ke meja depan melalui bentuk aliran, Ajax dapat diterima dalam fungsinya, ditempatkan secara total, dan terhubung ke depan.
Tautan asli: http://blog.csdn.net/eson_15/article/details/51487323
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.