Comment jquery implémente les requêtes Ajax

La méthode permettant à jquery d'implémenter la requête Ajax : 1. Méthode "$.ajax()" ; 2. Méthode "$.post()", le code est "$.post(url, data , func, dataType);"; 3. Méthode "$.get()", le code est "$.get(url, data, func, dataType);"; 4. Méthode "$.getJSON()", etc. .

Le système d'exploitation pour ce tutoriel : système Windows 10, version jQuery3.6.0, ordinateur Dell G3.

jquery implémente la requête Ajax

Ajax est utilisé pour communiquer entre le navigateur et le serveur sans actualiser la page entière. Le serveur va Au lieu de renvoyer la page entière, des données partielles sont renvoyées et les nœuds sont mis à jour via des opérations JavaScript DOM. Les formats de transmission de données incluent XML, JSON et d'autres formats, mais le plus couramment utilisé est le format JSON.
Nous pouvons utiliser l'objet JavaScript XMLHttpRequest pour implémenter l'Ajax natif, mais cette méthode est plus compliquée et difficile à écrire. jQuery a encapsulé Ajax, ce qui facilite le lancement de requêtes Ajax. Cet article présente brièvement le processus d'implémentation d'Ajax par jQuery :

1 Présentez le fichier jquery.js dans le répertoire tag#🎜 🎜#

 <script src="https://code.jquery.com/jquery-3.6.1.js"></script>

2. Plusieurs méthodes jQuery Ajax courantes

(1) $.ajax()# 🎜 🎜# ①url : adresse du lien, représentation sous forme de chaîne ②data : (facultatif) Les données à envoyer au serveur, à la fois GET et POST, seront automatiquement converties au format de chaîne de requête, avec Key/ value Représentée sous forme de paires clé-valeur, elle sera ajoutée à l'URL de la requête sous la forme QueryString, au format {A : '...', B : '...'}
③type : "POST " ou "GET", type de requête#🎜 🎜# ④timeout : délai d'attente de la requête, l'unité est en millisecondes, la valeur représente
⑤cache : s'il faut mettre en cache le résultat de la requête, bool représente
⑥contentType : type de contenu, la valeur par défaut est "application/x-www-form-urlencoded"# 🎜🎜# ⑦dataType : Le type de données de la réponse du serveur, représenté par une chaîne ; lorsqu'il est renseigné en json, il n'est pas nécessaire de désérialiser les données en json dans la fonction de rappel
⑧succès : Une fois la requête réussie, la fonction de rappel du serveur#🎜🎜 # ⑨erreur : La fonction rappelée par le serveur après l'échec de la requête
⑩complete : La fonction appelée une fois la requête terminée. sera appelé que la demande ait réussi ou échoué ; si les fonctions de réussite et d'erreur sont définies, cette fonction les suivra Appelé
⑪async : Si le traitement doit être asynchrone, bool indique, la valeur par défaut est vraie après le réglage ; cette valeur à false, JS ne s'exécutera pas vers le bas, mais attendra que le serveur renvoie les données et complète la fonction de rappel correspondante Puis exécutez
⑫username : Le nom d'utilisateur porté dans la demande d'authentification d'accès, la chaîne représente #🎜🎜. # ⑬password : Renvoie le mot de passe porté dans la demande d'authentification, la chaîne représente

 <script type="text/javascript">
        function login1(){
            $.ajax({
                //${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名
                url: "${pageContext.request.contextPath}/user/returnJson",
                type: "GET",
                data:'{name: 'James'}', //必须是字符串格式
                contentType:"application/json", //指定内容格式
                dataType:json,
                success: function(data) {  //括号里的data是服务器返回的数据
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            });
        }
    </script>

<script>
    $('#btn1').click(function () {
        $.ajax({
            type:"post",	//提交方式
            url:'${pageContext.request.contextPath}/JSONServlet',
            data:{
                bookname:  $("#bookname").val()//val() 方法返回或设置被选元素的值。
            },
            dataType: "json",   	//返回数据的格式
            success:function (responseData) {
                var html = "";
                $('#dataTable tr:not(:first)').remove(); //删除第一行之外的所有行
                // $('#dataTable > tbody > tr').remove();   // 删除所有行，表头会被删除
                console.log(responseData);
                for (var i = 0; i < responseData.length; i++) {
                    html += &#39;<tr>';
                    html += '<td>'+responseData[i].bookid+'</td>'+'<td>'+responseData[i].bookname+'</td>'+'<td>'+responseData[i].price+'</td>'
                    html += '</tr>';
                }
                $('#dataTable').append(html);
            },
        });
    });
</script>

#🎜 🎜#(2)$.post()


Use POST méthode pour exécuter la requête Ajax et charger les données depuis le serveur.
Format : $.post(url, data, func, dataType); Paramètres facultatifs :

①url : adresse du lien, représentation sous forme de chaîne ②data : doivent être envoyées au serveur Données, le format est {A : '...', B : '...'} ③func : La fonction rappelée par le serveur une fois la requête réussie function(data, status, xhr), où data sont les données renvoyées par le serveur, status est l'état de la réponse, xhr est l'objet XMLHttpRequest Personnellement, vous pouvez simplement vous concentrer sur le paramètre data

④dataType : le format des données renvoyées par le serveur#🎜🎜. #

<script type="text/javascript">
        function login2(){
            $.post(
                "${pageContext.request.contextPath}/user/returnJson",
                 '{name: 'James'}',
                  "application/json",
                 function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(3)$.get()# 🎜🎜#

Utilisez la méthode GET pour effectuer des requêtes Ajax et charger des données depuis le serveur.
Formulaire : $.get(url, data, func, dataType);

<script type="text/javascript">
        function login3(){
            $.get(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(4)$.getJSON()

#🎜 🎜#Form : $.getJSON(url, data, func); Utilisez la méthode GET pour exécuter la requête Ajax et charger les données au format JSON à partir du serveur.

<script type="text/javascript">
        function login4(){
            $.getJSON(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

Remarque : Étant donné que le format de données renvoyé par le serveur est déterminé comme étant json, cette méthode n'a pas besoin de spécifier dataType.

(5)$.load()

Insérez les données chargées par le serveur directement dans un nœud du DOM spécifié.

Format : $.load(url, data, func);
Si des données existent, la méthode POST est utilisée pour envoyer la requête, et si elle n'existe pas, la méthode GET est utilisée pour envoyer la demande.

		<div id="myRes"></div>
		function login5() {
            $('#myRes').load(
                "${pageContext.request.contextPath}/user/returnJson",  
                '{name: 'James'}',
                "application/json"
            );
            }

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!