Comment envoyer une requête GET/POST en utilisant Javascript ? (exemples détaillés)

Cet article vous apporte des connaissances pertinentes sur la façon d'utiliser Javascript pour envoyer des requêtes GET/POST. Si vous utilisez uniquement la soumission de formulaires, l'arrière-plan doit faire des jugements très complexes. Voyons comment utiliser JavaScript pour soumettre. vous sera utile. Tout le monde est utile.

Méthode de soumission de données GET/POST basée sur JQuery

Si vous êtes nouveau sur Javascript, vous n'êtes peut-être pas du tout clair sur JQuery comme moi, vous devez donc le vulgariser de manière appropriée. JQuery est un framework JavaScript rapide et concis. c'est le successeur de JavaScript Une autre excellente bibliothèque de code JavaScript (ou framework JavaScript) après Prototype. L'objectif de conception de JQuery est « écrire moins, faire plus », ce qui signifie écrire moins de code et faire plus de choses.

Il encapsule les codes fonctionnels couramment utilisés en JavaScript, fournit un modèle de conception JavaScript simple et optimise les opérations sur les documents HTML, le traitement des événements, la conception d'animations et l'interaction Ajax. Les principales fonctionnalités de JQuery peuvent être résumées comme suit : il possède une syntaxe de chaîne unique et une interface multifonctionnelle courte et claire ; il dispose d'un sélecteur CSS efficace et flexible, et peut étendre le sélecteur CSS ; il dispose d'un plug-in pratique ; mécanisme d'extension et plug-ins riches. jQuery est compatible avec divers navigateurs grand public, tels que IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, etc.

Adresse du site officiel de JQuery, vous pouvez cliquer pour visiter. Selon la version officielle, la dernière a atteint la v3.2.1, il est donc recommandé d'envisager de télécharger la dernière version de JQuery depuis le site officiel pour obtenir plus de fonctionnalités.

JQuery est très puissant, mais tout ce dont il a besoin pour implémenter la fonction actuelle, ce sont deux API simples. Vous pouvez cliquer pour afficher la documentation complète de l'API. De plus, il existe également du matériel d'apprentissage sur Javascript sur runnoob.com.

$ .get (URL, données, rappel)

Parameters	Description
url	requured, spécifie l'URL dont vous avez besoin pour demander
data	optional, spécifie à être envoyé avec la requête Les données au serveur, le format est json
callback	optionnel, fonction de retour, la fonction qui s'exécute lorsque la requête est réussie

$.post(url, data, callback)

paramètres	Description
url	Obligatoire, précise l'URL que vous devez demander
data	Facultatif, précise les données à envoyer au serveur avec la demande, le format est json
callback	facultatif, renvoie la fonction, la fonction qui s'exécute lorsque la requête est réussie

La méthode d'utilisation est la suivante. Tout d'abord, dans la page où JQuery doit être appelé, utilisez le. balise de script pour importer le fichier Jquery, par exemple :

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

Ensuite, utilisez l'espace vide de la page web, déclarez votre méthode et les paramètres à passer, vous pouvez faire ceci :

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

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

Ensuite, ajoutez un onclick attribut à l'étiquette de votre entrée/bouton ou à l'endroit où vous devez envoyer des données, par exemple :

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

De cette façon, vous pouvez utiliser JQuery pour envoyer les données.

Une autre méthode consiste à créer un formulaire et à l'utiliser pour le soumettre.

Utilisez Javascript/form pour soumettre la méthode de soumission de données 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);
}

La méthode d'appel est très simple, copiez ce bloc de code dans la balise de script de votre propre document HTML, puis vous pourrez l'utiliser directement, sélectionnez GET / La méthode POST dépend de vos propres besoins.
Il faut comprendre lentement la différence lors de l'utilisation.

【Recommandations associées : Tutoriel d'apprentissage Javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!