站長(zhǎng)資訊網(wǎng)
Jquery交互的方式有：1、load方式，從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中；2、GET方式，通過(guò)HTTP GET請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)的；3、POST方式，通過(guò)HTTP POST請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)的；4、getJSON方式，返回的就直接是json格式的對(duì)象；5、jQuery.ajax()方式；6、依附于表單的表單的局部刷新方式。
本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6版本、Dell G3電腦。
jquery ajax前后臺(tái)交互的6種方式
第一種：load，從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中
<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" 的元素的內(nèi)容， 加載到指定的 <div> 元素中： 實(shí)例： $("#div1").load("demo_test.txt #p1");
第二種：GET方式：
$(document).ready(function(){ $("#mybutton").click(function(){ $.get("haha.txt",null,function(data,status){ alert(data+":"+status); }); }); });
第三種：POST方式：
<script type="text/javascript"> $(document).ready(function() { $("#mybutton").click(function() { $.get("/Json/JsonServlet", { name:"我是誰(shuí)", age:12 }, function(data, status) { alert(data + ":" + status); }); }); }); </script>
POST要和后臺(tái)Servlet交互：
response.setCharacterEncoding("utf-8"); System.out.println(request.getParameter("name")); System.out.println(request.getParameter("age")); response.getWriter().println("你找到我了");
后臺(tái)輸出：
我是誰(shuí) 12
要訪問(wèn)后臺(tái)servlet也可以直接如此寫(xiě)地址：
$.get("JsonServlet",
第四種：getJSON方式：
<script type="text/javascript"> $(document).ready(function() { $("#mybutton").click(function() { $.getJSON("JsonServlet", { name:"我是誰(shuí)", age:12 }, function(json) { alert(json.name); $("#mydiv").html(json.name); }); }); }); </script>
返回的就直接是json格式的對(duì)象，無(wú)需JSON.parse的方法轉(zhuǎn)換。
注意：不管是哪種方式后臺(tái)都有兩種方式和前臺(tái)交互：
第一種后臺(tái)交互：直接拼接字符串。
response.getWriter(). print("{"name":"愛(ài)你","age":12}");
第二種 傳入JSON對(duì)象：
JSONObject jsonObject = new JSONObject("{'name':'愛(ài)你','age':12}"); response.getWriter().print(jsonObject);
相同的最終傳遞給前臺(tái)的時(shí)候都默認(rèn)以字符串的形式傳遞過(guò)去，
注意的是除了getJSON方式 前臺(tái)可以使用兩種方式來(lái)將字符串轉(zhuǎn)換成js對(duì)象：
1. eval（）函數(shù) ：不推薦，有隱患 會(huì)執(zhí)行其他js操作 2. JSON.parse（）函數(shù) ：推薦：只執(zhí)行對(duì)象轉(zhuǎn)換操作
你們是不是還要問(wèn) 不是有五種嗎 為啥子前面就講了四種？
沒(méi)錯(cuò) 還有一種：
第五種：jQuery.ajax()：
執(zhí)行異步 HTTP (Ajax) 請(qǐng)求
該方法是 jQuery 底層 AJAX 實(shí)現(xiàn)，所有的 jQuery AJAX 方法都使用 ajax() 方法。 。簡(jiǎn)單易用的高層實(shí)現(xiàn)見(jiàn) .get，.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得
