Mengintegrasikan API dengan JQuery Rangka Kerja Frontend

Membina keranjang belanja yang dinamik dengan jQuery dan spring boot rest api

Aplikasi web moden memerlukan komunikasi belakang belakang yang lancar. Tutorial ini menunjukkan bagaimana untuk mengintegrasikan panggilan API ke frontend berasaskan jQuery untuk permohonan keranjang belanja API yang berkuasa API Spring REST. Menggunakan keupayaan Ajax JQuery, kami akan membuat, membaca, mengemas kini, dan memadam (CRUD) barang -barang keranjang belanja dengan cekap.

Anggapkan anda mempunyai backend boot spring berfungsi dengan pangkalan data MySQL dan data produk penduduk. Titik akhir API untuk contoh ini ialah

. Kami akan menggunakan kaedah JQuery's http://localhost:8080/api/v1/products untuk komunikasi tak segerak, meningkatkan pengalaman pengguna dengan mengelakkan pengalihan halaman. $.ajax()

Titik pembelajaran utama:

1. Fundamental Ajax: Asynchronous JavaScript dan XML (AJAX) membolehkan komunikasi antara frontend dan backend tanpa penyegaran halaman penuh. JQuery memudahkan permintaan Ajax menggunakan . $.ajax() Contohnya: Asas Get Request

   $.ajax({
     url: 'http://localhost:8080/api/v1/products',
     method: 'GET',
     success: function(response) {
       console.log('Data fetched:', response);
     },
     error: function(error) {
       console.error('Error fetching data:', error);
     }
   });

Struktur HTML:
2. Jadual HTML asas akan memaparkan produk secara dinamik dan menyediakan titik interaksi CRUD. (Contoh HTML yang ditinggalkan untuk keringkasan, tetapi akan memasukkan jadual dengan lajur untuk ID, nama, harga, dan tindakan (edit, padam)).

Fungsi AJAX yang boleh diguna semula:
3. Memusatkan logik Ajax meningkatkan pemeliharaan kod dan mengurangkan kelebihan.

   Contohnya: Fungsi AJAX Umum

   Penggunaan:

   function ajaxRequest(url, method, data, successCallback, errorCallback) {
     $.ajax({
       url: url,
       method: method,
       data: JSON.stringify(data),
       contentType: 'application/json',
       success: successCallback,
       error: errorCallback || function(error) { console.error('Error:', error); }
     });
   }

   pelaksanaan CRUD:

   ajaxRequest('http://localhost:8080/api/v1/products', 'GET', null, function(response) {
     console.log(response);
   });

   kami akan melaksanakan operasi CRUD teras:

4. CREATE:

   penyerahan borang menggunakan
   dengan permintaan
   • untuk menambah produk baru. Pengendalian ralat akan memaparkan makluman kepada pengguna.

     $.ajax() POST baca:

     fungsi () mengambil data produk menggunakan permintaan
   dan memaparkan jadual HTML.

   • loadProducts() UPDATE: GET Menggunakan permintaan

     untuk mengemas kini produk sedia ada, yang dicetuskan oleh butang "Edit". Meminta pengguna untuk nama dan harga yang dikemas kini.

   • Padam: PUT Menggunakan permintaan

     untuk mengeluarkan produk, dicetuskan oleh butang "padam".

   • (Contoh kod terperinci untuk operasi CRUD ditinggalkan untuk keringkasan tetapi akan mengikuti struktur dan prinsip yang digariskan di atas menggunakan fungsi ). DELETE

   Pengendalian ralat yang teguh: ajaxRequest Melaksanakan pengendalian ralat untuk memberikan maklum balas yang bermaklumat kepada pengguna dan bantuan dalam debugging. Ini boleh melibatkan memaparkan mesej ralat dalam UI atau kesilapan pembalakan ke konsol.

Kesimpulan:

Tutorial ini menyediakan asas untuk mengintegrasikan sistem frontend dan backend menggunakan jQuery. Membina aplikasi CRUD membeli -belah berfungsi menunjukkan kuasa Ajax untuk membuat aplikasi web yang dinamik dan responsif. Pendekatan ini menggalakkan kod yang bersih, boleh diguna semula, penting untuk pembangunan web yang cekap dan menangani cabaran pembangunan dunia nyata.

Atas ialah kandungan terperinci Mengintegrasikan API dengan JQuery Rangka Kerja Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!