本周学习了ajax配合jquery的使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学生信息管理系统</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript"> function check() { $.post("list.action",{},function(data){ $("#studenttable tr:gt(0)").remove(); var htm; for(var i=0;i<data.length;i++) { htm="<tr id = "+data[i].id +"><td>"+data[i].number+"</td><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].birthday+"</td><td>"+data[i].address+ "</td><td colspan=\"2\"><a href=\"#\" class=\"updatelink\">修改</a><a href=\"#\" class=\"deletelink\">删除</a></td></tr>"; $("#studenttable").append(htm); } $(".updatelink").click(function(){ $.post("edit.action",{id:$(this).closest("tr").attr("id")},function(data){ $("#updateId").val(data.id); $("#updatenumber").val(data.number); $("#updatename").val(data.name); $("#updatesex").val(data.sex); $("#updatebirthday").val(data.birthday); $("#updateaddress").val(data.address); $("#updateDiv").dialog("open"); },"json"); }); $(".deletelink").click(function(){ $.post("delete.action",{id:$(this).closest("tr").attr("id")},function(data){ if(data=="1") { check(); } else{ alert("删除失败") } },"json"); }); },"json"); } $(function(){ $.ajaxSetup({contentType: "application/x-www-form-urlencoded; charset=utf-8" }); $("#addDiv").dialog({ title:"添加学生信息", autoOpen:false, height:500, width:400, modal:true, show:"blind", hide:"fade", close:function(){ $("#addnumber").val(""); $("#addname").val(""); $("#addsex").val(""); $("#addbirthday").val(""); $("#addaddress").val(""); } }); $("#updateDiv").dialog({ title:"修改学生信息", autoOpen:false, height:500, width:400, modal:true, show:"blind", hide:"fade", close:function(){ $("#updatenumber").val(""); $("#updatename").val(""); $("#updatesex").val(""); $("#updatebirthday").val(""); $("#updateaddress").val(""); } }); $("#addsubmit").click(function(){ $.post("add.action",{number:$("#addnumber").val(),name:$("#addname").val(),sex:$("#addsex").val(),birthday:$("#addbirthday").val(),address:$("#addaddress").val()} ,function(data) { if(data=="1") { $("#addDiv").dialog("close"); check(); } else{ $("#AddTip").html("添加信息失败！请重新输入数据。"); $("#AddTip").show().delay(5000).hide(0); } },"json"); }); $("#updatesubmit").click(function(){ $.post("update.action",{id:$("#updateId").val(),number:$("#updatenumber").val(),name:$("#updatename").val(),sex:$("#updatesex").val(),birthday:$("#updatebirthday").val(),address:$("#updateaddress").val()} ,function(data) { if(data=="1") { $("#updateDiv").dialog("close"); check(); } else{ $("#updateTip").html("修改信息失败！请重新输入数据。"); $("#updateTip").show().delay(5000).hide(0); } },"json");}); $("#addbutton").click(function(){ $("#addDiv").dialog("open"); }); check(); }); </script> </head> <body> <h1>学生信息管理系统</h1> <a id="addbutton" href="#">增加学生信息</a> <table border="1" style="background-color:green;" id="studenttable"> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>地址</th> <th colspan="2">操作</th> </tr> </table> <div id=updateDiv style="display: none"> <form id="updateform"> <table border="1" id=UpdateTable style="width:400px"> <tr><th>学号：</th><td><input type="text" id="updateId" name="id" style="display:none"><input type="text" id="updatenumber" name="number"></td></tr> <tr><th>姓名：</th><td><input type="text" id="updatename" name="name"></td></tr> <tr><th>性别：</th><td><input type="radio" id="updatesex" name="sex" value="男" checked >男 <input type="radio" id="sex" name="updatesex" value="女">女</td></tr> <tr><th>生日：</th><td><input type="date" id="updatebirthday" name="birthday"></td><tr> <tr><th>地址：</th><td> <input type="date" id="updateaddress" name="address"></td></tr> <tr><th colspan="2" style="background-color:#C6E2FF;"><input type="submit" id="updatesubmit" name="submit" value="修改" style="background-color:#F08080"/> <input type="reset" id="updatereset" value="重置" style="background-color:#F08080"/></th></tr> </table> </form> <span style="color:red;" id="updateTip"></span> </div> <div id="addDiv" style="display: none"> <form id="addform"> <table border="1" style="width:400px" id="AddTable"> <tr><th>学号：</th><td><input type="text" id="addnumber" name="number" ></td></tr> <tr><th>姓名：</th><td><input type="text" id="addname" name="name"></td></tr> <tr><th>性别：</th><td><input type="radio" id="addsex" name="sex" value="男" checked >男 <input type="radio" id="addsex" name="sex"value="女" >女</td></tr> <tr><th>生日：</th><td><input type="date" id="addbirthday" name="birthday"></td><tr> <tr><th>地址： </th><td><input type="date" id="addaddress" name="address"></td></tr> <tr><th colspan="2" style="background-color:#C6E2FF;"><input type="submit" id="addsubmit" name="submit"value="添加" style="background-color:#F08080"/> <input type="reset" style="background-color:#F08080" id="addreset" value="重置"/></th></tr> </table> </form> <span style="color:red;" id="AddTip"></span> </div> </body> </html>
原文：https://www.cnblogs.com/w669399221/p/13089610.html