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