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;
}
}
}