Maison > interface Web > js tutoriel > Comment envoyer une requête GET/POST en utilisant Javascript ? (exemples détaillés)

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

WBOY
Libérer: 2021-12-20 17:28:29
avant
21074 Les gens l'ont consulté

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.

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

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>
Copier après la connexion

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>
Copier après la connexion

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;)" />
	...
Copier après la connexion

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);
}
Copier après la connexion

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal