你也許連刪庫跑路都不會（delete、drop和truncate刪除資料）
阿新 • • 發佈：2020-11-10
Ajax 請求
什麼是Ajax請求
-
AJAX 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發 技術。
-
Ajax 是一種瀏覽器通過 js 非同步發起請求，區域性更新頁面的技術。
-
Ajax 請求的區域性更新，瀏覽器位址列不會發生變化 區域性更新不會捨棄原來頁面的內容
原生 AJAX 請求的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function ajaxRequest() { // 1、我們首先要建立XMLHttpRequest var xmlhttprequest = new XMLHttpRequest(); // 2、呼叫open方法設定請求引數 xmlhttprequest.open("GET","http://localhost:8080/JavaWeb_Ajax_war_exploded/ajaxServlet?action=javaScriptAjax",true); //4、在send方法前繫結onreadystatechange事件，處理請求完成後的操作。 xmlhttprequest.onreadystatechange = function () { if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){ var jsonObj = JSON.parse(xmlhttprequest.responseText); //把響應的資料顯示在頁面上 document.getElementById("div01").innerHTML = "編號："+jsonObj.id+",姓名："+jsonObj.name; } } // 3、呼叫send方法傳送請求 xmlhttprequest.send(); } </script> </head> <body> <button onclick="ajaxRequest()">ajax request</button> <div id="div01"> </div> </body> </html>
jQuery 中的 Ajax 請求
$.ajax 方法
- url 表示請求的地址
- type 表示請求的型別 GET 或 POST 請求
- data 表示傳送給伺服器的資料 格式有兩種： 一：name=value&name=value 二：{key:value}
- success 請求成功，響應的回撥函式
- dataType 響應的資料型別 常用的資料型別有： text 表示純文字 xml 表示 xml 資料 json 表示 json 物件
// ajax請求 $("#ajaxBtn").click(function(){ $.ajax({ url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet", // data:"action=jQueryAjax", data:{action:"jQueryAjax"}, type:"GET", success:function (data) { // alert("伺服器返回的資料是：" + data); // var jsonObj = JSON.parse(data); $("#msg").html(" ajax 編號：" + data.id + " , 姓名：" + data.name); }, dataType : "json" }); });
$.get 方法和$.post 方法
-
url 請求的 url 地址
-
data 傳送的資料
-
callback 成功的回撥函式
-
type 返回的資料型別
// ajax--get請求 $("#getBtn").click(function(){ $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) { $("#msg").html(" get 編號：" + data.id + " , 姓名：" + data.name); },"json"); }); // ajax--post請求 $("#postBtn").click(function(){ // post請求 $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { $("#msg").html(" post 編號：" + data.id + " , 姓名：" + data.name); },"json"); });
$.getJSON 方法
-
url 請求的 url 地址
-
data 傳送給伺服器的資料
-
callback 成功的回撥函式
// ajax--getJson請求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
$("#msg").html(" getJSON 編號：" + data.id + " , 姓名：" + data.name);
});
});
表單序列化 serialize()
serialize()可以把表單中所有表單項的內容都獲取到，並以 name=value&name=value 的形式進行拼接。
// ajax請求
$("#submit").click(function(){
// 把引數序列化
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 編號：" + data.id + " , 姓名：" + data.name);
});
});
使用Ajax驗證使用者名稱是否可用
protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 獲取請求的引數username
String username = req.getParameter("username");
// 呼叫userService.existsUsername();
boolean existsUsername = userService.existsUsername(username);
// 把返回的結果封裝成為map物件
Map<String,Object> resultMap = new HashMap<>();
resultMap.put("existsUsername",existsUsername);
Gson gson = new Gson();
String json = gson.toJson(resultMap);
resp.getWriter().write(json);
}
// 頁面載入完成之後
$(function () {
$("#username").blur(function () {
//1 獲取使用者名稱
var username = this.value;
$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" + username,function (data) {
if (data.existsUsername) {
$("span.errorMsg").text("使用者名稱已存在！");
} else {
$("span.errorMsg").text("使用者名稱可用！");
}
});
});