Ajax全套增刪改查：

注意：使用Ajax的前提是，你必須要匯入jquery的那個庫檔案。即：jquery-3.2.1-min.js檔案。

下面的程式碼是寫在zhanghao_create.js檔案中的，然後在zhanghao_create.jsp頁面中使用script標籤將該js檔案引入即可。

<script>

$(function(){    //這是JQuery中的頁面載入函式
	
	// 點選下拉選單，就會去後臺數據庫中進行查詢所有的身份，把所有的身份返回給前端頁面的下拉選單
	$.ajax({
		url:"/Pro_StudentMS/servlet/AccountServlet",//要跳轉的目的地。要跳轉到哪個Servlet
		type:"post",  //請求方式
		data:{"action":"retrieveRoles"},     //要傳遞的引數。以json鍵值對的方式來傳遞。。比如說這裡：指定了要使用Servlet類中的哪個方法。
		async:false,    //這是設定非同步為假。這個可以不寫。但是，如果你想要寫的是下拉選單的非同步查詢。下拉選單在瀏覽器頁面的展現效果可能不太好。這時，可能就需要用到這個了。。它的作用 是將 Ajax的非同步變為了同步
		success:function(returnValue,status){
			if(status == "success"){
				var oSelect = $('<select name="roleid" lay-verify="required"></select>');
				var oOption0 = $("<option selected='selected'></option>");
				oOption0.appendTo(oSelect);
				var json = $.parseJSON(returnValue);
				$.each(json,function(i,v){
					var oOption = $("<option value='"+v.t_role_id+"'>"+v.rolename+"</option>");
					oOption.appendTo(oSelect);
				});
				oSelect.appendTo($("#selectDiv"));
			}
		}
	});

	// 查詢帳號（自動獲取賬號）
	$.ajax({
		url:"/Pro_StudentMS/servlet/AccountServlet",
		type:"post",
		data:{"action":"retrieveAccount"},
		success:function(returnValue,status){
			if(status == "success"){
				$("#loginid").val(returnValue);
			}
		}
	});

	var flag = true;// 這是一個標誌位。在下面提交表單時會起作用。表示可以建立、新增
	
	$("#pass2").on("blur",function(){     //前端校驗
		if($("#pass1").val() != $("#pass2").val()){
			$("#msg2").css("color","red");
			$("#msg2").text("兩次密碼不一致！");
			flag = false;
		}else{
			flag = true;
			$("#msg2").css("color","green");
			$("#msg2").text("✔");
		}
	});
	$("#pass1").on("blur",function(){     //前端校驗
	    var ret = /^[A-Za-z0-9]+$/;
		if($("#pass1").val().length < 6 || $("#pass1").val().length > 15){
			$("#msg1").css("color","red");
			$("#msg1").text("密碼長度必須在6-15之前");
			flag = false;
		}else if(!ret.test($("#pass1").val())){
			$("#msg1").css("color","red");
			$("#msg1").text("密碼只允許數字和字母");
			flag = false;
		}
		else{
			flag = true;
			$("#msg1").css("color","green");
			$("#msg1").text("✔");
		}
	});






        //使用Ajax來提交表單資料
	$("#submit_btn").on("click",function(){
		if(flag){  //flag在上面有設定
			$.ajax({
				url:"/Pro_StudentMS/servlet/AccountServlet",
				type:"post",
				data:{"action":"createAccount","theForm":$("#form01").serialize()},
//注意：如果不需要傳別的資料，那這裡只寫$("form01").serialize()就行，不用寫json對
				success:function(returnValue,status){
					if(status == "success"){
						if(returnValue == "yes"){
							alert("新增成功！");
							window.open("/Pro_StudentMS/frame.jsp?a=createOk","_top");
						}
					}
				}
			});
		}else{
			return;
		}
	});
	$("#reset_btn").on("click",function(){
		location.reload();
	});
});
 

下面的程式碼是寫在zhanghao.js檔案中的，在zhanghao.jsp頁面使用script標籤引入該js檔案即可。（實際上，無論是直接寫在jsp頁面中；還是寫在js檔案中、再到jsp頁面中引入js檔案。這兩種方式都是差不多的。即使寫在js檔案中，那jsp頁面中的各種標籤的屬性也都是可以隨意使用的，當然了，前提是你已經在jsp頁面中引入了該js檔案。）

$(function(){
	// 全查
	$.ajax({
		url:"/Pro_StudentMS/servlet/AccountServlet",
		type:"post",
		data:{"action":"retrieve"},
		success:function(returnValue,status){//回撥函式
			if(status == "success"){
				var oTbody = $("#tbody01");// 抓到<tbody>
                             //將後臺傳來的字串轉成json對，方便遍歷
				var accountJson = $.parseJSON(returnValue);

                    //遍歷之後，直接將查詢結果顯示在頁面
				$.each(accountJson,function(i,v){
					var oTr = $("<tr></tr>");
					var oTd1 = $('<td><input type="checkbox" value="'+v.loginid+'"></td>');
					var oTd2 = $("<td>"+(++i)+"</td>");
					var oTd3 = $("<td>"+(v.loginid)+"</td>");
					var oTd4 = $("<td>"+(v.loginpass)+"</td>");
					var oTd5 = $("<td>"+(v.rolename)+"</td>");
					var oTd6 = "";
					if(v.status == "1"){
						oTd6 = $("<td>已使用</td>");
						oTd6.css("color","green");
					}else{
						oTd6 = $("<td>未使用</td>");
						oTd6.css("color","red");
					}
					var oTd7 = $("<td>"+(v.cjrq)+"</td>");
					var oTd8 = $('<td><a href="javascript:;" onclick="update01(this,'+(v.t_login_id)+')" class="layui-btn layui-btn-mini news_edit"><i class="iconfont icon-edit"></i> 編輯</a></td>');
					oTd1.appendTo(oTr);
					oTd2.appendTo(oTr);
					oTd3.appendTo(oTr);
					oTd4.appendTo(oTr);
					oTd5.appendTo(oTr);
					oTd6.appendTo(oTr);
					oTd7.appendTo(oTr);
					oTd8.appendTo(oTr);
					oTr.appendTo(oTbody);				
				});
			}
		}
	});
});







//我編寫過的修改有兩種。一種是直接在當前頁面上進行修改。比較直觀。另一種是從後臺資料庫中取資料然後再跳到另一個頁面進行修改。
function update01(oA  ,  t_login_id){  //直接在當前頁面上 進行修改
	var oTd3 = $(oA).parent().parent().children().eq(3);
	oTd3.attr("contenteditable","true");
	oTd3.css("border","1px solid red");  //將這條記錄中每一行都變成文字編輯框
	oTd3.focus();    //聚焦

	var oTd4 = $(oA).parent().parent().children().eq(4);
	oTd4.attr("contenteditable","true");
	oTd4.css("border","1px solid red");

	var oTd7 = $(oA).parent().parent().children().eq(7);
	
//對要改的東西更改了之後，就要進行確認以便提交到資料庫中了。
	oTd7.html('<td><a href="javascript:;"      onclick="update02(this,'+t_login_id+')"     class="layui-btn layui-btn-mini news_edit"><i class="iconfont icon-edit">確定</i></a></td>');
	//oTd7.css("text-align","center");
	
}








function update02(oA    ,   t_login_id){   //對修改進行確認的點選事件。與上面的配合用
	// id / 密碼 / 身份
	var str = "";
	str     +=t_login_id + "," ;
	var oTd3 = $(oA).parent().parent().children().eq(0).parent().parent().children().eq(3);
	str     +=(oTd3.text()) + ",";
	var oTd4 = $(oA).parent().parent().children().eq(0).parent().parent().children().eq(4);
	str     +=(oTd4.text());
	$.ajax({
		url:"/Pro_StudentMS/servlet/AccountServlet",
		type:"post",
		data:{"action":"udpateAccount","str":str},//在後臺會對str字串進行分割處理
		success:function(returnValue,status){
			if(status == "success"){
				location.reload();
			}
		}
	});
}




















function deleteLogin(){     //根據勾選的複選框進行  批量刪除
	var str = "";
	var num = 0;
	// 抓到所有被選中的checkbox
	$("#tbody01 input[type='checkbox']:checked").each(function(i,v){
		str+= $(this).val()+",";
		  num++;
	});
	if(num==0){
		alert("至少選擇一項");
		return;
	}else{
		var result = confirm("你有 " + num + " 條帳號要刪除，確定嗎");
		if(result){
			$.ajax({
				url:"/Pro_StudentMS/servlet/AccountServlet",
				type:"post",
				data:{"action":"deleteAccount","ids":str},
				success:function(returnValue,status){
					if(status == "success"){
						if(returnValue=="yes"){
							alert("刪除成功！");
							location.reload();
						};
					}
				}
			});
		}else{
			alert("搞笑呢？");
			location.reload();
			return;
		}
	}
	
}