Maison > Article > interface Web > Quels sont les moyens d'interagir avec Jquery ?
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 ;
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.
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("{'name':'爱你','age':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!