站長資訊網
Jquery交互的方式有：1、load方式，從服務器加載數據，并把返回的數據放入被選元素中；2、GET方式，通過HTTP GET請求從服務器請求數據的；3、POST方式，通過HTTP POST請求從服務器請求數據的；4、getJSON方式，返回的就直接是json格式的對象；5、jQuery.ajax()方式；6、依附于表單的表單的局部刷新方式。
本教程操作環境：windows7系統、jquery3.6版本、Dell G3電腦。
jquery ajax前后臺交互的6種方式
第一種：load，從服務器加載數據，并把返回的數據放入被選元素中
<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");
登錄后復制
第二種：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的方法轉換。
注意：不管是哪種方式后臺都有兩種方式和前臺交互：
第一種后臺交互：直接拼接字符串。
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) 請求
該方法是 jQuery 底層 AJAX 實現，所有的 jQuery AJAX 方法都使用 ajax() 方法。 。簡單易用的高層實現見 .get，.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得
