Maison  >  Article  >  interface Web  >  Quels sont les moyens d’interagir avec Jquery ?

Quels sont les moyens d’interagir avec Jquery ?

青灯夜游
青灯夜游original
2023-01-03 19:03:472495parcourir

Les méthodes d'interaction Jquery sont : 1. Méthode de chargement, charge les données du serveur et place les données renvoyées dans l'élément sélectionné ; 2. Méthode GET, demande de données au serveur via la requête HTTP GET ; le serveur via requête HTTP POST ; 4. méthode getJSON, l'objet renvoyé est directement au format json ; 5. méthode jQuery.ajax() 6. méthode de rafraîchissement partiel du formulaire attaché au formulaire ;

Quels sont les moyens d’interagir avec Jquery ?

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.

6 façons d'interagir avec jquery ajax front et backend

La première façon : charger, charger les données du serveur et placer les données renvoyées dans l'élément sélectionné

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失败:"+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,  
加载到指定的 <div> 元素中:
实例:
$("#div1").load("demo_test.txt #p1");

La deuxième façon : Méthode GET :

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});

Troisième méthode : Méthode POST :

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

POST pour interagir avec l'arrière-plan Servlet : POST要和后台Servlet交互:

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");

后台输出:

我是谁
12

要访问后台servlet也可以直接如此写地址:

$.get("JsonServlet",

第四种:getJSON方式:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>

返回的就直接是json格式的对象,无需JSON.parse的方法转换。

注意:不管是哪种方式后台都有两种方式和前台交互:

第一种后台交互:直接拼接字符串。

response.getWriter().  
print("{\"name\":\"爱你\",\"age\":12}");

第二种 传入JSON对象:

JSONObject jsonObject =  
new JSONObject("{&#39;name&#39;:&#39;爱你&#39;,&#39;age&#39;:12}");
response.getWriter().print(jsonObject);

相同的最终传递给前台的时候都默认以字符串的形式传递过去,
注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象:

1. eval()函数  :不推荐,有隐患 会执行其他js操作
2. JSON.parse()函数 :推荐:只执行对象转换操作

你们是不是还要问 不是有五种吗 为啥子前面就讲了四种?

没错 还有一种:

第五种:jQuery.ajax():

执行异步 HTTP (Ajax) 请求rrreee

Sortie en arrière-plan : rrreeePour accéder au La servlet d'arrière-plan peut également écrire l'adresse directement comme ceci : rrreee

🎜🎜La quatrième méthode : méthode getJSON : 🎜🎜🎜rrreee🎜🎜L'objet renvoyé est directement au format json, sans avoir besoin de conversion de la méthode JSON.parse. 🎜🎜🎜Remarque : Quelle que soit la manière dont l'arrière-plan interagit avec le frontend, il existe deux manières : 🎜🎜🎜La première interaction en arrière-plan : épisser directement les chaînes. 🎜🎜rrreee🎜🎜Le deuxième type d'objet JSON entrant : 🎜🎜rrreee🎜La même chose est transmise à la réception sous forme de chaîne par défaut 🎜 Notez qu'en plus de la 🎜méthode getJSON🎜, la réception. Vous pouvez utiliser deux méthodes. Pour convertir la chaîne en objet js : 🎜rrreee🎜 Voulez-vous toujours demander s'il existe cinq types ? Pourquoi ai-je parlé de quatre types auparavant ? 🎜🎜Oui, il y en a une autre : 🎜🎜🎜🎜La cinquième méthode : jQuery.ajax() : 🎜🎜🎜🎜Exécuter une requête HTTP (Ajax) asynchrone🎜🎜Cette méthode est l'implémentation AJAX sous-jacente de jQuery. Toutes les méthodes jQuery AJAX utilisent la méthode ajax(). . Pour une implémentation de haut niveau simple et facile à utiliser, voir .get🎜🎜, 🎜🎜🎜

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!

Déclaration:
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