Contoh HTML (dengan asumsi butang berada dalam bentuk):

Ubah suai bahagian fungsi addGuestName yang mencipta butang:

 fungsi addGuestName (obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  const addpaxNamebutton = itemClicked.NextElementSibling; // Andaikan ini adalah butang addpaxNamebutton.style.display = 'inline-block' yang sedia ada;
  // Pastikan butang dibuat di sini atau butang yang ada mempunyai Type = "Button"
  // Jika ia dibuat secara dinamik, anda boleh menetapkannya di sini // addPaxNameButton.setAttribute ('Type', 'Button'); // Jika anda perlu mengubah suai jenis butang sedia ada var addpaxNameField = document.createElement ('input');
  addPaxNameField.setAttribute ('type', 'text');
  addPaxNameField.SetAttribute ('Nama', 'VisitOnNamesurname []');
  addPaxNameField.SetAttribute ('Placeholder', 'Masukkan Nama & Keluarga');
  itemClicked.ParentNode.insertBefore (addPaxNameField, itemClicked.NextSibling);
  addPaxNameField.setAttribute ("diperlukan", "diperlukan");

  // Dengarkan acara klik butang Tambah Button AddPaxNameButton.AddeventListener ('klik', () => {
    const name = addPaxNameField.Value;
    UpdateguestName (paxid, nama);
    // Di sini anda boleh mempertimbangkan untuk mengeluarkan kotak input atau melumpuhkan butang untuk memberikan maklum balas pengguna});
}

2. Segarkan semula halaman semasa selepas permintaan pengambilan berjaya.

Selepas menghalang lompatan halaman, kita perlu menyegarkan semula halaman semasa untuk memaparkan data terkini selepas permintaan FETCH berjaya diselesaikan dan data dikemas kini. Ini boleh dicapai melalui kaedah lokasi.reload ().

Kaedah lokasi.reload () akan memuatkan semula dokumen semasa. Ia mempunyai parameter Boolean pilihan yang, jika ditetapkan kepada benar, memaksa penyemak imbas untuk memuatkan semula halaman dari pelayan dan bukannya memuatkannya dari cache. Biasanya, tiada parameter atau ditetapkan kepada palsu akan mencukupi.

Mengintegrasikan lokasi.reload () ke dalam fungsi async anda:

 Fungsi Async UpdateguestName (paxid, nama) {
  const paxidbody = json.stringify ({pxid: paxid, name: name}); // Kaedah Stringification JSON Console.log ("Paxid:", PaxidBody);
  Cuba {
    tetapan const = {
      Kaedah: "pos",
      tajuk: {
        "Kandungan-jenis": "Aplikasi/json; charset = UTF-8"
      },
      Badan: Paxidbody,
    };
    tindak balas const = menunggu pengambilan (
      "/Change-name.php",
      tetapan
    );

    jika (! response.ok) {// semak kod status respons HTTP membuang ralat baru (`HTTP ERROR! Status: $ {response.status}`);
    }

    const data = menunggu tindak balas.json ();
    Console.log ("Data:", Data);

    // Selepas permintaan berjaya dan data diproses, muat semula lokasi halaman semasa.reload ();

  } menangkap (ralat) {
    console.error ("Ralat:", ralat); // Gunakan konsol.error untuk mencetak ralat // anda boleh memaparkan mesej ralat kepada pengguna di sini}
}

Perkara yang perlu diperhatikan:

• Pengendalian Ralat: Dalam permintaan FETCH, atribut respons.ok boleh digunakan untuk memeriksa sama ada kod status respons HTTP berada dalam lingkungan 200-299. Ini adalah kaedah pengendalian ralat yang lebih mantap daripada hanya bergantung pada cuba ... menangkap, kerana mengambil tidak akan membuang kesilapan ketika menghadapi ralat HTTP (seperti 404, 500), hanya apabila terdapat masalah rangkaian.
• Maklum Balas Pengguna: Sebelum halaman menyegarkan, anda boleh mempertimbangkan untuk memberi pengguna maklum balas ringkas, seperti memaparkan mesej "Mengemaskini ..." atau "Kemas kini berjaya!" untuk meningkatkan pengalaman pengguna.
• JSON.Stringify: Menggunakan json.stringify () untuk membina badan permintaan JSON adalah lebih selamat dan lebih mantap daripada rentetan splicing secara manual, dan boleh mengelakkan kesilapan format yang berpotensi dan masalah suntikan.

PHP backend endpoint

Titik akhir backend PHP anda adalah cara yang betul untuk mengembalikan data JSON, kerana ia adalah antara muka API dan tidak boleh cuba mengarahkan halaman.

  Php
header ('jenis kandungan: aplikasi/json; charset = utf-8');
// Andaikan bahawa status $ dan pembolehubah mesej $ telah ditetapkan berdasarkan hasil operasi pangkalan data $ myObj = new \ stdclass ();
$ myObj-> status = $ status;
$ myObj-> mesej = $ mesej;
$ myjson = json_encode ($ myObj);
echo $ myjson;
?>

Kod PHP ini adalah tindak balas API JSON standard, ia tidak mengakibatkan navigasi penyemak imbas, jadi masalahnya adalah dengan tingkah laku lalai butang frontend.

Meringkaskan

Untuk mencapai tinggal di halaman semasa dan menyegarkannya selepas permintaan post yang tidak disengajakan, kunci adalah:

1. Mencegah navigasi lalai: Pastikan butang yang mencetuskan permintaan pengambilan mempunyai atribut Type = "Button", atau jika butang dalam bentuk, gunakan Event.PreventDefault () untuk mengelakkan tingkah laku penyerahan lalai borang.
2. Refresh Page: Selepas permintaan FETCH berjaya diselesaikan dan data tindak balas diproses, location.reload () dipanggil untuk menyegarkan halaman semasa untuk memaparkan status data terkini.

Melalui langkah-langkah di atas, anda akan dapat membina proses kemas kini data asynchronous yang lebih mesra pengguna dan berfungsi.