Saya akan menjelaskan secara singkat cara kerja formulir HTML, mengapa halaman Anda memuat ulang dan bagaimana Anda dapat berkomunikasi dengan server tanpa memuat ulang halaman Anda, terakhir, bagaimana Anda dapat memperbarui halaman Anda berdasarkan komunikasi ini
Ketika Anda membuat form tag dan struktur ke dalamnya, dengan button dari submit type di dalamnya, menentukan action (atau menggunakan default), kemudian, setelah mengklik button yang disebutkan sebelumnya, form Anda dikirimkan. Saat mengirimkan formulir Anda, semua elemen di dalam formulir, memiliki atribut name (i. e. name="somename") diambil dan permintaan akan dikirim ke tindakan yang ditentukan (default ke halaman yang sama), di mana form data akan direpresentasikan sebagai pasangan kunci-nilai, kuncinya adalah nama elemen formulir Anda dan nilainya adalah
Setelah form kirim, browser Anda akan mengirim permintaan ke target form. Tindakan form (jika valid) akan menerima permintaan, menanganinya, dan menanggapi browser Anda
Saat browser menerima respons ini, browser akan menampilkannya sebagai konten halaman. Pengguna mengalami perilaku ini saat memuat ulang halaman. Anda terganggu dengan perilaku ini, seperti yang Anda jelaskan dalam pertanyaan Anda dan Anda lebih suka memiliki perilaku yang tidak terlalu menonjol dan lebih halus. Ini dimungkinkan dengan permintaan AJAX
Permintaan AJAX didokumentasikan dengan baik, jadi, jika Anda tidak terbiasa dengannya - yang memang demikian -, maka saya menyarankan untuk membaca konten tautan yang saya berikan kepada Anda di atas dan dapatkan pengalaman dengan AJAX. Jika Anda terjebak dengannya, beri tahu saya pemblokir Anda, tetapi, untuk saat ini, saya akan berasumsi bahwa tutorial mengklarifikasi masalah ini untuk Anda dan dalam waktu yang wajar Anda akan berhasil mempelajari cara mengatasinya.
Anda juga dapat berkomunikasi dengan server Anda (tanpa memuat ulang halaman) dengan pemberitahuan push atau soket web, tetapi karena ini adalah kasus penggunaan respons-permintaan, saya sangat menyarankan penggunaan AJAX. Karena AJAX adalah singkatan dari Asynchronous Javascript and XML, bagian asinkron menunjukkan bahwa Anda memanggil fungsi asinkron yang tidak Anda tunggu, yaitu, permintaan Anda dikirim ke server dan ada kejadian untuk menangani respons server, setelah
Jika Anda akan memiliki permintaan AJAX, maka Anda tidak perlu form dan submit button pasti tidak diperlukan, sebagai gantinya, Anda dapat menggunakan form7 dengan event handler klik yang akan mengambil data dan mengirim permintaan
Cara termudah untuk menangani permintaan adalah dengan mengambil respons (HTML) dan menyegarkan konten halaman Anda untuk wilayah yang ingin Anda perbarui (tentu saja tanpa memuat ulang halaman). Tapi ini belum tentu ideal
Jika struktur Anda tidak berubah, tetapi konten Anda berubah, maka jauh lebih masuk akal untuk mengubah kode server Anda untuk hanya mengirim konten sebagai JSON (Javascript Object Notation) dan hanya memperbarui konten halaman Anda. Pendekatan ini memastikan bahwa server Anda tidak harus mengirimkan respons yang sangat besar dan berlebihan ke browser Anda jika tidak diperlukan. Sebaliknya, itu hanya mengirimkan data, mengurangi beban jaringan server Anda dan, sebagai hasilnya, membuat server Anda lebih terukur. Namun ini berarti browser Anda harus memperbarui konten itu sendiri, yang tidak lagi otomatis dan Anda perlu mengkode perilaku dalam bahasa sisi klien, seperti Javascript
Karena semua ini jelas baru bagi Anda, saya menyarankan Anda untuk memulai dengan pendekatan yang paling sederhana, untuk mendapatkan beberapa keberhasilan yang akan meningkatkan moral Anda, yaitu, pada tahap pertama, kirim permintaan sebagai AJAX, server seharusnya hanya merespons dengan batin
document.body.innerHTML = response;di panggilan balik Anda
Harapan yang masuk akal adalah bahwa halaman Anda tidak dimuat ulang oleh browser, tetapi disegarkan. Jika Anda mencapai tahap ini, Anda mungkin memutuskan bahwa itu cukup baik untuk Anda, atau Anda dapat memutuskan untuk memperbaikinya, mengubah sisi server untuk menanggapi permintaan AJAX dengan JSON dan mengimplementasikan beberapa fungsi sisi klien untuk menangani
Saya tentu saja menyarankan yang terakhir, tetapi Anda tentu saja memiliki kebebasan memilih di sini
Sekarang, mari kita pahami apa itu metode permintaan
Permintaan GET adalah permintaan yang ditentukan oleh URL (Unified Resource Locator) dan parameternya diteruskan sebagai parameter GET, yaitu di dalam URL, setelah ?
https. // www. halamanmu. com?parameter=nilaianda¶meterkeduaanda=nilaikeduaanda
Permintaan POST adalah permintaan di mana parameter POST juga dapat ditentukan. Di PHP Anda memiliki cara yang rapi untuk menentukan jenis permintaan, lihat halaman yang luar biasa ini. Mendeteksi jenis permintaan dalam PHP (GET, POST, PUT atau DELETE)
Sekarang, saat Anda memuat halaman untuk pertama kalinya, permintaan GET sedang dikirim. Setelah form dikirim (melalui AJAX), Anda perlu menentukan bahwa Anda mengirim permintaan POST dan kemudian server akan tahu bahwa hanya perlu mengirim data (bukan HTML) sebagai tanggapan