Rumah > Artikel > hujung hadapan web > Bagaimana untuk menulis penghantaran pos dalam javascript
Dalam pembangunan bahagian hadapan, kami selalunya perlu menggunakan teknologi AJAX untuk menghantar permintaan HTTP, termasuk permintaan POST. Artikel ini akan menerangkan cara menulis permintaan POST dalam JavaScript.
1. Konsep asas permintaan POST
Pertama sekali, kita perlu memahami konsep asas permintaan POST.
Dalam protokol HTTP, GET dan POST kedua-duanya adalah kaedah permintaan yang biasa digunakan Perbezaan utama ialah:
Di atas adalah konsep asas permintaan POST Seterusnya, kami akan memperkenalkan cara menulis permintaan POST dalam JavaScript.
2. Gunakan objek XMLHttpRequest untuk menghantar permintaan POST
Dalam JavaScript, kami boleh menggunakan objek XMLHttpRequest untuk menghantar permintaan HTTP, termasuk permintaan GET dan POST.
Objek XMLHttpRequest ialah API JavaScript yang boleh digunakan untuk bertukar-tukar data dengan pelayan di latar belakang. Ia boleh memuatkan data secara tidak segerak melalui teknologi AJAX dan boleh mengemas kini halaman tanpa memuatkan semula keseluruhan halaman.
Berikut ialah langkah asas untuk menghantar permintaan POST menggunakan objek XMLHttpRequest:
Pertama, kita perlu membuat objek XMLHttpRequest. Ini boleh dicapai menggunakan kod berikut:
var xhr = new XMLHttpRequest();
Seterusnya, kita perlu menetapkan laluan dan parameter permintaan. Parameter ini akan diletakkan dalam badan permintaan. Ini boleh dicapai menggunakan kod berikut:
xhr.open('POST', 'http://example.com/api', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send('name=John&age=25');
Dalam kod di atas, kami menetapkan laluan permintaan ke http://example.com/api, dan parameternya ialah name=John dan umur=25.
Selain itu, pengepala permintaan Jenis kandungan ditetapkan kepada application/x-www-form-urlencoded. Ini ialah pengepala permintaan POST standard, memberitahu pelayan bahawa parameter dalam badan permintaan adalah dalam format nilai kunci.
Akhir sekali, kita perlu menerima data yang dikembalikan oleh pelayan. Ini boleh dicapai menggunakan kod berikut:
xhr.onreadystatechange = function() { if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { console.log(xhr.responseText); } }
Dalam kod di atas, kami menetapkan pengendali acara onreadystatechange XMLHttpRequest. Apabila readyState menjadi 4 (iaitu, permintaan telah selesai) dan kod status ialah 200, ini bermakna pelayan telah bertindak balas dengan jayanya dan mengembalikan data. Pada masa ini, data yang dikembalikan oleh pelayan boleh diperolehi melalui xhr.responseText.
3. Gunakan API ambil untuk menghantar permintaan POST
Selain objek XMLHttpRequest, anda juga boleh menggunakan API ambil untuk menghantar permintaan POST. API fetch ialah API JavaScript standard untuk menghantar permintaan HTTP antara klien dan pelayan dan merangkum respons pelayan menggunakan objek Promise.
Berikut ialah langkah asas untuk menghantar permintaan POST menggunakan API pengambilan:
Pertama, kami perlu menetapkan laluan permintaan dan parameter. Ini boleh dicapai menggunakan kod berikut:
fetch('http://example.com/api', { method: 'POST', headers: { 'Content-type': 'application/x-www-form-urlencoded' }, body: 'name=John&age=25' }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
Dalam kod di atas, kami menetapkan laluan permintaan ke http://example.com/api, dan parameternya ialah name=John dan umur=25.
Selain itu, pengepala permintaan Jenis kandungan ditetapkan kepada application/x-www-form-urlencoded. Ini ialah pengepala permintaan POST standard, memberitahu pelayan bahawa parameter dalam badan permintaan adalah dalam format nilai kunci.
Akhir sekali, kita perlu menerima data yang dikembalikan oleh pelayan. Anda boleh menggunakan objek Promise API pengambilan untuk mengendalikannya. Ini boleh dicapai menggunakan kod berikut:
.then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
Dalam kod di atas, kami menggunakan kaedah response.json() untuk menukar badan respons kepada format JSON dan memproses data respons melalui kaedah then() , dan melalui kaedah catch() Kendalikan pengecualian.
4. Ringkasan
Melalui kaedah yang diperkenalkan dalam artikel ini, kami boleh menulis permintaan POST dalam JavaScript, termasuk menggunakan objek XMLHttpRequest dan API pengambilan. Kaedah ini boleh memuatkan data secara tidak segerak dan mengemas kini halaman tanpa memuatkan semula keseluruhan halaman. Anda boleh memilih kaedah yang sesuai untuk menghantar permintaan POST berdasarkan keperluan sebenar.
Atas ialah kandungan terperinci Bagaimana untuk menulis penghantaran pos dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!