1. 程式人生 > 資料庫 >你也許連刪庫跑路都不會(delete、drop和truncate刪除資料)

你也許連刪庫跑路都不會(delete、drop和truncate刪除資料)

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("使用者名稱可用!");
						}
					});
				});