Bagaimana untuk menghantar permintaan GET/POST menggunakan Javascript? (contoh terperinci)

Artikel ini membawa anda pengetahuan yang berkaitan tentang cara menggunakan Javascript untuk menghantar permintaan GET/POST Jika anda hanya menggunakan penyerahan borang, latar belakang perlu membuat pertimbangan yang sangat kompleks. Mari kita lihat cara menggunakan JavaScript untuk menyerahkan ia membantu semua orang.

Kaedah penyerahan data GET/POST berasaskan JQuery

Jika anda baru menggunakan Javascript, anda mungkin keliru sepenuhnya tentang JQuery seperti saya. , jadi adalah wajar untuk mempopularkan JQuery sebagai rangka kerja JavaScript yang pantas dan ringkas Ia adalah satu lagi pustaka kod JavaScript (atau rangka kerja JavaScript) selepas Prototaip. Tujuan reka bentuk JQuery ialah "tulis kurang, buat lebih", yang bermaksud menulis kurang kod dan melakukan lebih banyak perkara.

Ia merangkumi kod fungsi JavaScript biasa, menyediakan corak reka bentuk JavaScript yang ringkas dan mengoptimumkan operasi dokumen HTML, pemprosesan acara, reka bentuk animasi dan interaksi Ajax. Ciri teras JQuery boleh diringkaskan seperti berikut: ia mempunyai sintaks rantaian yang unik dan antara muka berbilang fungsi yang pendek dan jelas ia mempunyai pemilih css yang cekap dan fleksibel, dan boleh memanjangkan pemilih CSS; mekanisme sambungan dan pemalam yang kaya. jQuery serasi dengan pelbagai penyemak imbas arus perdana, seperti IE 6.0, FF 1.5, Safari 2.0, Opera 9.0, dsb.

Alamat laman web rasmi JQuery, anda boleh klik untuk melawat. Mengikut versi rasmi, yang terbaru telah mencapai v3.2.1, jadi disyorkan untuk mempertimbangkan untuk memuat turun JQuery terkini dari laman web rasmi untuk mendapatkan lebih banyak ciri.

JQuery sangat berkuasa, tetapi yang diperlukan untuk melaksanakan fungsi semasa ini hanyalah dua API mudah Anda boleh mengklik untuk melihat dokumentasi API yang lengkap Selain itu, terdapat juga bahan pembelajaran tentang Javascript di runnoob.com .

$.get(url, data, panggil balik)

参数	描述
url	必需，规定您需要请求的URL
data	可选，规定连同请求发送到服务器的数据，格式是json
callback	可选，回掉函数，当请求成功时运行的函数

$.post(url, data, callback)

参数	描述
url	必需，规定您需要请求的URL
data	可选，规定连同请求发送到服务器的数据，格式是json
callback	可选，回掉函数，当请求成功时运行的函数

Kaedah penggunaannya seperti ini , Pertama, dalam halaman di mana JQuery perlu dipanggil, gunakan teg skrip untuk mengimport fail Jquery, sebagai contoh:

	<script src="static/js/jquery-3.2.1.min.js"></script>

Kemudian, dalam ruang kosong halaman web, isytiharkan kaedah anda dan parameter yang perlu dilalui Anda boleh melakukan ini:

	<script>
		function doPost(url)
		{
			var val1 = document.getElementsByName("key1").value;
			var val2 = document.getElementsByName("key2").value;

			$.post(url, {'key1':val1, 'key2':val2});
		}
	</script>

Seterusnya, tambahkan atribut onclick pada teg input/butang anda atau tempat anda perlu menghantar data, contohnya:

	...
	<input type="button" value="submit" onclick="doPost(&#39;/&#39;)" />
	...

Dengan cara ini, anda boleh menggunakan JQuery untuk menghantar data .

Kaedah lain ialah membina borang dan menggunakan borang untuk menyerahkan.

Gunakan Javascript/borang untuk menyerahkan kaedah penyerahan data GET/POST

/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}

Kaedah panggilan sangat mudah, salin blok kod ini ke dalam skrip dokumen HTML anda sendiri tag, dan kemudian anda boleh menggunakannya secara terus Pilih sahaja kaedah GET/POST mengikut keperluan anda sendiri.
Anda perlu perlahan-lahan memahami perbezaan semasa penggunaan.

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Bagaimana untuk menghantar permintaan GET/POST menggunakan Javascript? (contoh terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!