學習目标
1.能夠使用jQuery的
$.get()
進行通路
2.能夠使用jQuery的
$.post()
進行通路
3.能夠使用jQuery的
$.ajax()
進行通路
4.能夠使用jQuery3.0的
$.get()
新增簽名進行通路
5.能夠使用jQuery3.0的
$.post()
新增簽名進行通路
jQuery架構的ajax簡介
-
（1）原生Ajax程式設計為什麼不用？
代碼量大，使用不友善，封裝成函數，直接調用
- （2)jQuery架構的ajax函數
$.get請求-原理
-
（1）get函數
$.get(url, [data], [callback], [type])
- url:表示伺服器的通路路徑,如:“s1”
- data:表示向伺服器發送的參數,
格式: 1: "username=wzx&password=123"
- callback：匿名函數，表示接收伺服器發送過來的響應，這個函數自動執行
- type :表示浏覽器期望伺服器發送過來的資料類型，
格式："text" "json"
$.get(
"s2",
"username=wzx&password=123",
function(data){ //這個data就是伺服器傳回的字元串
//處理資料
},
"text"
);
$.post(
"s2",
"username=wzx&password=123",
function(data){ //這個data就是伺服器傳回的字元串 var data = []
//處理資料
},
"json"
);
var url = "s2";
var param = "username=lft&password=123";
var func = function(data){
};
var type = "json";
$.post(url,param,func,type); $.get請求-代碼實作
（1）在點選事件中調用get請求
（2）在服務端傳回json或者字元串資料
（3）在回調函數中編寫業務邏輯
web\1-juqery-get_post_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function clickFn() {
//向伺服器發送異步請求
$.post(
"s2",
"username=寶強x&password=123",
function (data) {
alert(data);
},
"text"
);
}
</script>
</head>
<body>
<!--設計一個按鈕，一點選這個按鈕，就向伺服器發出異步請求-->
<input type="button" value="點我，發出jquery$.get異步請求" onclick="clickFn()"/>
</body>
</html> src\com\wzx\pack02_jquery_ajax\Demo2Servlet.java
@WebServlet(name = "Demo2Servlet",urlPatterns = "/s2")
public class Demo2Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解決請求亂碼
request.setCharacterEncoding("UTF-8");
//1:接收參數
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("username:"+username);
System.out.println("password:"+password);
// System.out.println(1/0);
//解決響應亂碼
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("你好 ajax!");
}
} $.ajax請求方式***
（1）什麼是
$.ajax
請求方式
這種方式是将
$.get
和
$.post
方式合成一種請求
（2）如何調用
$.ajax({鍵：值,鍵：值,鍵：值});
web\2-jquery-ajax-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function clickFn() {
$.ajax({
url:"s2",
async:true,
data:"username=bingbing&password=456",
type:"post",
dataType:"text",
success:function (data) {
alert(data)
},
error:function () {
alert("伺服器發生了錯誤")
}
});
}
</script>
</head>
<body>
<!--設計一個按鈕，一點選這個按鈕，就向伺服器發出異步請求-->
<input type="button" value="點我，發出ajax異步請求" onclick="clickFn()"/>
</body>
</html> - 以上調用$.ajax的函數代碼最好是複制過來，因為方法内的鍵不能随意修改，保能修改值
- type 如果是get 表示get請求，反之就是post請求
jquery3.0新特性ajax請求
- （1）什麼是juqery3.0新特性GET/POST請求
$.get({鍵：值,鍵：值});
$.post({鍵：值,鍵：值}); - 因為方法指定get與post，是以要比$.ajax少一個鍵,type:post或者type:get，其他都一樣。
- 企業中一般還是使用1.x
Jquery 擷取json資料顯示清單
src\main\resources\static\list_account.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1引入jquery檔案-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="button" value="添加">
<input type="text" value="" name="searchword">
<input type="button" value="查詢">
<table border="1" width="100%">
<thead>
<tr>
<th>編号</th>
<th>姓名</th>
<th>餘額</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!-- <tr>-->
<!-- <td>1001</td>-->
<!-- <td>jack</td>-->
<!-- <td>100</td>-->
<!-- <td>修改|删除</td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>1002</td>-->
<!-- <td>rose</td>-->
<!-- <td>100</td>-->
<!-- <td>修改|删除</td>-->
<!-- </tr>-->
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
$(function () {
//2 頁頁加載成功的時候執行
//alert("加載成功")
//參1：位址
//參2：處理
//參3：類型
$.get("http://localhost:8002/day01/account/find",
function (data) {
//{"code":200,"msg":"查詢成功","data":[{"id":"101","name":"jack","value":100.0},{"id":"102","name":"rose","value":100.0},{"id":"103","name":"tony","value":100.0},{"id":"1667347080045","name":"11","value":22.0},{"id":"1667347092913","name":"22","value":33.0},{"id":"1667347133294","name":"11","value":22.0}]}
if (200 == data.code) {
//清空表中的标簽
$("#tbody").html("")
var array = data.data
var i
for (i = 0; i < array.length; i++) {
var account = array[i] //每個Account
var tr = ' <tr>\n' +
' <td>' + account.id + '</td>\n' +
' <td>' + account.name + '</td>\n' +
' <td>' + account.value + '</td>\n' +
' <td>修改|删除</td>\n' +
' </tr>'
$("#tbody").append(tr)
}
}
}
, "json")
})
</script> 使用JQuery将form表單資料轉換為JSON字元串傳遞到背景處理
一般地，我們在處理表單（form表單哦）資料時，傳輸對象或字元串到背景，Spring MVC或SpringBoot的Controller接收時使用一個對象作為參數就可以被正常接收并封裝到對象中。這種方式前端處理表單資料時可以這樣處理：
$('#form').serialize()
//或者
$('#form').serializeArray() 這種方式傳輸的資料格式可以在F12中看到是這樣的：
使用AJAX發送到背景後，背景使用一個對象作為Controller層内某個方法的參數即可完成自動封裝。
但是，我現在背景的需求是需要接收一個@RequestBody标記的Account類型的參數，
然後自己寫方法（利用反射機制）封裝對象。就像下面這樣：
這時就需要傳遞一個JSON格式的字元串，比如：
這時候，前端的處理方式如下，注意：contentType是必須的：
var fields = $('#ff').serializeArray();
var obj = {}; //聲明一個對象
$.each(fields, function(index, field) {
obj[field.name] = field.value; //通過變量，将屬性值，屬性一起放到對象中
}) 再發送請求給背景
$.ajax({
type: "post",
url: "http://localhost:8002/day01/account/add",
async: true,
contentType: 'application/json',
dataType: 'JSON',
// data:$('#ff').serialize(),//這兩種方式都不能直接将表單資料轉換為json格式
// data:$('#ff').serializeArray(),
data: JSON.stringify(obj),//将對象轉為json字元串
success: function (obj) {
if (obj.code == 200) {
alert(obj.msg)
}
}
}); 這樣，通過F12可以看到傳遞的就是json字元串：
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)