spring-mybatis项目练习 - 通讯录系统，前端
Posted 枫林晚月
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了spring-mybatis项目练习 - 通讯录系统，前端相关的知识，希望对你有一定的参考价值。
最后的一起放了，前端没什么特别的，如前文所说，这里是一种比较极端的实现，将三个页面所有功能集中一个页面实现，是当初用来做ajax练习的。
页面加载后会执行check()检查，如果已经登录直接显示主页面；页面由controler(page)控制显示；这里的ajax都是不带jquery的原生实现。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>通讯录系统?</title> 6 <script src="resources/jquery-3.2.1.min.js"></script> 7 <script type="text/javascript"> 8 /* 全选/取消全选 9 * formName 所在form的name值 10 * checkboxName checkbox的name值 11 * 注意：所有checkbox的name值都必须一样，这样才能达到全选的效果 12 */ 13 function selectAll(formName,checkboxName){ 14 var form = document.all.item(formName); 15 var elements = form.elements[checkboxName]; 16 //dom对象与dom数组分开处理 17 if(elements.length) 18 for (var i=0;i<elements.length;i++){ 19 var e = elements[i]; 20 e.checked = form.alls.checked; 21 } 22 else elements.checked = form.alls.checked; 23 } 24 /* 检查是否有checkbox被选中 */ 25 function checkAll(formName,checkboxName){ 26 var hasCheck = false; 27 var form = document.all.item(formName); 28 var elements = form.elements[checkboxName]; 29 if(!(typeof(elements.length) == "undefined")) 30 for (var i=0;i<elements.length;i++){ 31 var e = elements[i]; 32 if(e.checked){ 33 hasCheck = true; 34 } 35 } 36 else if(elements.checked) hasCheck = true; 37 return hasCheck; 38 } 39 /* 执行操作 */ 40 41 //导出 42 function exportgo(){ 43 if (!checkAll("form1","checkbox1")){ 44 alert("至少选择一个联系人！"); 45 } else { 46 exportbyajax(); 47 } 48 } 49 50 //导入xml 51 function importgo(){ 52 var s = "\<input type=\"file\" id=\"fileex\" name=\"fileex\" \>"; 53 s += "<input type=\"button\" value=\"确定添加\" onclick=\"importh()\">"; 54 $("#importc").html(s); 55 } 56 57 function importh(){ 58 var f = document.getElementById("fileex").files; 59 if(f[0] == null){ 60 alert("请选择文件！"); 61 return false; 62 } 63 //类型 64 var type = f[0].type; 65 if(type == "text/xml"){ 66 importbyajax(); 67 }else{ 68 alert("不是xml文件"); 69 } 70 71 } 72 73 //增加 74 function adddo(){ 75 if($("#newtr").html() == null){ 76 var tableht = $("#table1").html(); 77 tableht = tableht+"<tr align=\"center\" id=\"newtr\">"+ 78 "<td></td>"+ 79 "<td><input type=\"text\" style=\"width:70px;\" id=\"addname\"></td>"+ 80 "<td><input type=\"text\" style=\"width:150px;\" id=\"addtele\"></td>"+ 81 "<td><input type=\"text\" style=\"width:70px;\" id=\"addaddr\"></td>"+ 82 "<td><input type=\"text\" style=\"width:150px;\" id=\"addemai\"></td>"+ 83 "<td><input type=\"button\" value=\"确定添加\" onclick=\"addgo()\"></td>"+ 84 "</tr>"; 85 $("#table1").html(tableht); 86 } 87 88 } 89 90 function addgo(){ 91 if($("#addname").val() == ""){ 92 alert("姓名不能为空"); 93 }else if($("#addtele").val() == ""){ 94 alert("电话不能为空"); 95 }else{ 96 addbyajax(); 97 } 98 } 99 100 //编辑 101 function editdo(id){ 102 var name = $("#tdname"+id).html(); 103 $("#tdname"+id).html("<input type=\"text\" style=\"width:70px;\" id=\"edname"+id+"\" value=\""+name+"\">"); 104 var tel = $("#tdtel"+id).html(); 105 $("#tdtel"+id).html("<input type=\"text\" style=\"width:150px;\" id=\"edtel"+id+"\" value=\""+tel+"\">"); 106 var add = $("#tdadd"+id).html(); 107 $("#tdadd"+id).html("<input type=\"text\" style=\"width:70px;\" id=\"edadd"+id+"\" value=\""+add+"\">"); 108 var ema = $("#tdema"+id).html(); 109 $("#tdema"+id).html("<input type=\"text\" style=\"width:150px;\" id=\"edema"+id+"\" value=\""+ema+"\">"); 110 $("#edit"+id).html("<input type=\"button\" value=\"确定修改\" onclick=\"editgo("+id+")\">"); 111 } 112 113 function editgo(id){ 114 if($("#edname"+id).val() == ""){ 115 alert("姓名不能为空"); 116 }else if($("#edtel"+id).val() == ""){ 117 alert("电话不能为空"); 118 }else{ 119 editbyajax(id); 120 } 121 } 122 123 124 /* 125 *********** ajax部分 ************* 126 */ 127 128 var xmlHttp = false; 129 function getXMLHttpRequest(){ 130 //获得Microsoft IE 131 try{ 132 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 133 }catch(e1){ 134 try{ 135 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 136 }catch(e2){ 137 xmlHttp = false; 138 } 139 } 140 //获得非Microsoft IE 141 if (!xmlHttp && typeof XMLHttpRequest != ‘undefined‘) { 142 xmlHttp = new XMLHttpRequest(); 143 } 144 } 145 146 //列表及用户名请求 147 function showbyajax(){ 148 149 var url = "head?random="+Math.random(); 150 xmlHttp.open("GET", url, true); 151 xmlHttp.onreadystatechange = gethead; 152 153 xmlHttp.send(null); 154 } 155 156 //获取用户名 157 function gethead(){ 158 if(xmlHttp.readyState == 4){ 159 if(xmlHttp.status == 200){ 160 var str = xmlHttp.responseText; 161 $("#headline").html("通讯录 - "+str+"的联系人"); 162 listbyajax(); 163 }else{ 164 alert("获取用户信息失败！！"); 165 } 166 } 167 } 168 169 function listbyajax(){ 170 171 var url = "list?random="+Math.random(); 172 xmlHttp.open("GET", url, true); 173 xmlHttp.onreadystatechange = getlist; 174 175 xmlHttp.send(null); 176 } 177 178 //获取联系人列表 179 function getlist(){ 180 if(xmlHttp.readyState == 4){ 181 if(xmlHttp.status == 200){ 182 var tableh = listhead(); 183 var str = xmlHttp.responseText; 184 var lj = eval(‘(‘ + str + ‘)‘); 185 for(var i=0;i<lj.length;i++){ 186 tableh += "<tr align=\"center\" id=\"tr"+lj[i].id+"\">"+ 187 "<td><input type=\"checkbox\" name=\"checkbox1\" value=\""+lj[i].id+"\"/></td>"+ 188 "<td id=\"tdname"+lj[i].id+"\">"+lj[i].name+"</td>"+ 189 "<td id=\"tdtel"+lj[i].id+"\">"+lj[i].telephone+"</td>"+ 190 "<td id=\"tdadd"+lj[i].id+"\">"+lj[i].address+"</td>"+ 191 "<td id=\"tdema"+lj[i].id+"\">"+lj[i].email+"</td>"+ 192 "<td id=\"edit"+lj[i].id+"\" >"+ 193 "<input type=\"button\" value=\"修改\" onclick=\"editdo("+lj[i].id+")\"> "+ 194 "<input type=\"button\" value=\"删除\" onclick=\"deletebyajax("+lj[i].id+")\">"+ 195 "</td>"+ 196 "</tr>"; 197 } 198 $("#table1").html(tableh); 199 }else{ 200 alert("获取联系人列表失败！！"); 201 } 202 } 203 } 204 205 function listhead(){ 206 var head = "<tr bgcolor=\"#CFCFCF\">"+ 207 "<th><input type=\"checkbox\" id=\"alls\" name=\"alls\" onClick=\"selectAll(\‘form1\‘,\‘checkbox1\‘)\"/></th>"+ 208 "<th>姓名</th>"+ 209 "<th>电话</th>"+ 210 "<th>地址</th>"+ 211 "<th>电子邮箱</th>"+ 212 "<th style=\" width:150px; \">编辑</th>"+ 213 "</tr>"; 214 return head; 215 } 216 217 //增加 218 function addbyajax(){ 219 220 var url = "add?random="+Math.random(); 221 xmlHttp.open("POST", url, true); 222 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 223 xmlHttp.onreadystatechange = addres; 224 225 var send = "name="+$("#addname").val()+ 226 "&tele="+$("#addtele").val()+ 227 "&addr="+$("#addaddr").val()+ 228 "&emai="+$("#addemai").val(); 229 xmlHttp.send(send); 230 } 231 232 function addres(){ 233 if(xmlHttp.readyState == 4){ 234 if(xmlHttp.status == 200){ 235 var r = xmlHttp.responseText; 236 if(r == -1){ 237 alert("参数为空！"); 238 }else if(r == 1){ 239 alert("添加成功"); 240 }else{ 241 alert("添加失败！"); 242 } 243 findbyajax(); 244 }else{ 245 alert("添加操作出错！！"); 246 } 247 } 248 } 249 250 //删除 251 function deletebyajax(id){ 252 253 var url = "delete?random="+Math.random(); 254 xmlHttp.open("POST", url, true); 255 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 256 xmlHttp.onreadystatechange = deleteres; 257 258 xmlHttp.send("memberid="+id); 259 } 260 261 function deleteres(){ 262 if(xmlHttp.readyState == 4){ 263 if(xmlHttp.status == 200){ 264 var r = xmlHttp.responseText; 265 if(r == -1){ 266 alert("参数为空！"); 267 }else if(r == 1){ 268 alert("删除成功"); 269 }else{ 270 alert("删除失败！"); 271 } 272 findbyajax(); 273 }else{ 274 alert("删除操作出错！！"); 275 } 276 } 277 } 278 279 //修改 280 function editbyajax(id){ 281 var editwords = "id="+id+ 282 "&name="+$("#edname"+id).val()+ 283 "&tele="+$("#edtel"+id).val()+ 284 "&addr="+$("#edadd"+id).val()+ 285 "&emai="+$("#edema"+id).val(); 286 287 var url = "edit?random="+Math.random(); 288 xmlHttp.open("POST", url, true); 289 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 290 xmlHttp.onreadystatechange = editres; 291 292 xmlHttp.send(editwords); 293 } 294 295 function editres(){ 296 if(xmlHttp.readyState == 4){ 297 if(xmlHttp.status == 200){ 298 var r = xmlHttp.responseText; 299 if(r == -1){ 300 alert("参数为空！"); 301 }else if(r == 1){ 302 alert("修改成功"); 303 }else{ 304 alert("修改失败！"); 305 } 306 findbyajax(); 307 }else{ 308 alert("修改操作出错！！"); 309 } 310 } 311 } 312 313 //查询 314 function findbyajax(){ 315 var findwords = "&name="+$("#findname").val()+ 316 "&tele="+$("#findtele").val()+ 317 "&addr="+$("#findaddr").val()+ 318 "&emai="+$("#findemai").val(); 319 320 var url = "find?random="+Math.random(); 321 xmlHttp.open("POST", url, true); 322 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 323 xmlHttp.onreadystatechange = getlist; 324 325 xmlHttp.send(findwords); 326 } 327 328 //导出 329 function exportbyajax(){ 330 331 var id_array=new Array(); 332 $(‘input[name="checkbox1"]:checked‘).each(function(){ 333 id_array.push($(this).val());//向数组中添加元素 334 }); 335 var idstr=id_array.join(‘,‘);//将数组元素连接起来以构建一个字符串 336 337 var url = "export?memberids="+idstr+"&random="+Math.random(); 338 xmlHttp.open("GET", url, true); 339 xmlHttp.onreadystatechange = exportdo; 340 341 xmlHttp.send(null); 342 } 343 344 function exportdo(){ 345 if(xmlHttp.readyState == 4){ 346 if(xmlHttp.status == 200){ 347 var r = xmlHttp.responseText; 348 if(r == 0){ 349 alert("参数为空！"); 350 }else if(r == -1){ 351 alert("导出失败！"); 352 }else{ 353 $("#downloada").attr("href","books/bookexport/addressbookbyid"+r+".xml"); 354 $("#downloadbtn").trigger("click"); 355 } 356 }else{ 357 alert("导出操作出错！"); 358 } 359 } 360 } 361 362 //导入 363 function importbyajax(){ 364 var form = new FormData(document.getElementById("form2")); 365 366 var url = "import?random="+Math.random(); 367 xmlHttp.open("POST", url, true); 368 xmlHttp.onreadystatechange = importres; 369 370 xmlHttp.send(form); 371 } 372 373 function importres(){ 374 if(xmlHttp.readyState == 4){ 375 if(xmlHttp.status == 200){ 376 var r = xmlHttp.responseText; 377 if(r == 1){ 378 alert("导入完成"); 379 listbyajax(); 380 }else if(r == 0){ 381 alert("文件导入失败-_-||\n可能因为导入的文件不是标准的通讯录文件"); 382 }else{ 383 alert(r); 384 } 385 }else{ 386 alert("导入操作出错！"); 387 } 388 } 389 } 390 391 //登录 392 function loginbyajax(){ 393 394 var url = "login?random="+Math.random(); 395 xmlHttp.open("POST", url, true); 396 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 397 xmlHttp.onreadystatechange = loginres; 398 399 var send = "user_name="+$("#user_name").val()+ 400 "&user_pw="+$("#user_pw").val(); 401 xmlHttp.send(send); 402 } 403 404 function loginres(){ 405 if(xmlHttp.readyState == 4){ 406 if(xmlHttp.status == 200){ 407 var r = xmlHttp.responseText; 408 if(r == -2){ 409 alert("参数为空！"); 410 }else if(r == -1){ 411 alert("密码错误！"); 412 }else if(r == 0){ 413 alert("帐号不存在！"); 414 }else{ 415 controler(2); 416 } 417 }else{ 418 alert("系统无响应！"); 419 } 420 } 421 } 422 423 //注册 424 function regbyajax(){ 425 426 var url = "register?random="+Math.random(); 427 xmlHttp.open("POST", url, true); 428 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 429 xmlHttp.onreadystatechange = registerres; 430 431 var send = "username="+$("#username").val()+ 432 "&apassword="+$("#apassword").val(); 433 xmlHttp.send(send); 434 } 435 436 function registerres(){ 437 if(xmlHttp.readyState == 4){ 438 if(xmlHttp.status == 200){ 439 var r = xmlHttp.responseText; 440 if(r == -2){ 441 alert("参数为空！"); 442 }else if(r == 0){ 443 alert("该账号被抢注，换一个试试！"); 444 }else if(r == 1){ 445 alert("注册成功！"); 446 controler(1); 447 }else{ 448 alert("系统错误，注册失败！错误代码："+r); 449 } 450 }else{ 451 alert("系统无响应！"); 452 } 453 } 454 } 455 456 //************* 页面跳转相关 ************* 457 458 //状态检查 459 function checkcondition(){ 460 getXMLHttpRequest(); 461 var url = "check?random="+Math.random(); 462 xmlHttp.open("GET", url, true); 463 xmlHttp.onreadystatechange = checkres; 464 465 xmlHttp.send(null); 466 } 467 468 function checkres(){ 469 if(xmlHttp.readyState == 4){ 470 if(xmlHttp.status == 200){ 471 var r = xmlHttp.responseText; 472 if(r == 1){ 473 controler(1); 474 }else if(r == 2){ 475 controler(2); 476 } 477 }else{ 478 alert("系统无响应！"); 479 } 480 } 481 } 482 483 //退出 484 function leave(){ 485 486 var url = "leave?random="+Math.random(); 487 xmlHttp.open("GET", url, true); 488 xmlHttp.onreadystatechange = leaveres; 489 490 xmlHttp.send(null); 491 } 492 493 function leaveres(){ 494 if(xmlHttp.readyState == 4){ 495 if(xmlHttp.status == 200){ 496 alert("您已退出系统"); 497 controler(1); 498 }else{ 499 alert("系统无响应！"); 500 } 501 } 502 } 503 504 /** 505 *********** 页面控制 *********** 506 */ 507 508 509 function controler(page){ 510 //1 - 登录页面、 2 - 主页面、 3 - 注册页面 511 if(page == 1){ 512 $("#headline").html("通讯录 - 用户登录"); 513 $("#jumpbtn").html("注册 "); 514 $("#jumpbtn").attr("onclick","controler(3)"); 515 var pagehtml="<table class=\"table_noborder\" style=\"margin:0 auto\">"+ 516 "<tr>"+ 517 " <td>用户名：</td>"+ 518 " <td>"+ 519 " <input type=\"text\" id=\"user_name\" />"+ 520 " </td>"+ 521 "</tr>"+ 522 "<tr>"+ 523 " <td>密 码 ：</td>"+ 524 " <td>"+ 525 " <input type=\"password\" id=\"user_pw\" />"+ 526 " </td>"+ 527 "</tr>"+ 528 "<tr>"+ 529 " <td colspan=\"2\"><input type=\"button\" onclick=\"logindo()\" value=\"登录\"/>"+ 530 " <input type=\"button\" onclick=\"linputdel()\" value=\"重置\"/></td>"+ 531 "</tr>"+ 532 "</table>"; 533 $("#showview").html(pagehtml); 534 }else if(page == 2){ 535 $("#headline").html("通讯录 - 用户登录"); 536 $("#jumpbtn").html("退出 "); 537 $("#jumpbtn").attr("onclick","leave()"); 538 var pagehtml="<div style=\"width:800px; margin:20px auto; \">"+ 539 " 姓名<input type=\"text\" id=\"findname\" style=\"width:90px;\" /> "+ 540 " 电话<input type=\"text\" id=\"findtele\" style=\"width:150px;\" /> "+ 541 " 地址<input type=\"text\" id=\"findaddr\" style=\"width:90px;\" /> "+ 542 " 邮箱<input type=\"text\" id=\"findemai\" style=\"width:150px;\" /> "+ 543 " <button onclick=\"findbyajax()\">查询</button>"+ 544 " <input type=\"button\" value=\"清空\" onclick=\"refresh()\" />"+ 545 "</div>"+ 546 "<form name=\"form1\" id=\"form1\">"+ 547 " <table id=\"table1\" border=\"2\" style=\"width:800px; margin:20px auto; \"></table>"+ 548 "<div style=\"width:160px; margin:20px 0px 20px auto;\">"+ 549 " <input type=\"button\" name=\"addbut\" value=\"添加\" onclick=\"adddo()\" /> "+ 550 " <input type=\"button\" name=\"exportbut\" value=\"导出\" onclick=\"exportgo()\" />"+ 551 "</div>"+ 552 "</form>"+ 553 "<form id=\"form2\" enctype=\"multipart/form-data\">"+ 554 " <div id=\"importc\" style=\"width:160px; margin:20px 0px 20px auto;\">"+ 555 " <button onclick=\"importgo()\">导入</button>"+ 556 " </div>"+ 557 "</form>"+ 558 "<a style=\"display:none\" id=\"downloada\" href=\"\" download=\"\">"+ 559 "<button id=\"downloadbtn\"></button></a>"; 560 $("#showview").html(pagehtml); 561 showbyajax(); 562 }else if(page == 3){ 563 $("#headline").html("通讯录 - 用户注册"); 564 $("#jumpbtn").html("登录 "); 565 $("#jumpbtn").attr("onclick","controler(1)"); 566 var pagehtml="<table class=\"table_noborder\" style=\"margin:0 auto\">"+ 567 "<tr>"+ 568 " <td class=\"tag\">用户名：</td>"+ 569 " <td><input type=\"text\" id=\"username\" /></td>"+ 570 "</tr>"+ 571 "<tr>"+ 572 " <td class=\"tag\">登录密码：</td>"+ 573 " <td><input type=\"password\" id=\"password\" /></td>"+ 574 "</tr> "+ 575 "<tr>"+ 576 " <td class=\"tag\">确认密码：</td>"+ 577 " <td><input type=\"password\" id=\"apassword\" /></td>"+ 578 "</tr>"+ 579 "<tr>"+ 580 " <td colspan=\"2\"><input type=\"button\" onclick=\"registerdo()\" value=\"注册\"/>"+ 581 " <input type=\"button\" onclick=\"rinputdel()\" value=\"重置\"/></td>"+ 582 "</tr>"+ 583 "</table>"; 584 $("#showview").html(pagehtml); 585 }else{ 586 alert("页面参数错误："+page); 587 } 588 } 589 590 //登陆 591 function logindo(){ 592 if($("#user_name").val()==‘‘){ 593 alert(" * 请输入用户名！?"); 594 }else if($("#user_pw").val()==‘‘){ 595 alert(" * 请输入密码！?"); 596 }else{ 597 loginbyajax(); 598 } 599 } 600 601 function linputdel(){ 602 $("#user_name").val(""); 603 $("#user_pw").val(""); 604 } 605 606 //注册 607 function registerdo(){ 608 if($("#username").val()==‘‘){ 609 alert(" * 请输入用户名?"); 610 }else if($("#password").val()==‘‘){ 611 alert(" * 请输入密码?"); 612 }else if($("#apassword").val()==‘‘){ 613 alert(" * 请确认密码?"); 614 }else if(!($("#password").val()==$("#apassword").val())){ 615 alert(" * 两次输入不一致"); 616 }else{ 617 regbyajax(); 618 } 619 } 620 621 function rinputdel(){ 622 $("#username").val(""); 623 $("#password").val(""); 624 $("#apassword").val(""); 625 } 626 627 //主页面刷新 628 function refresh(){ 629 $("#findname").val(""); 630 $("#findtele").val(""); 631 $("#findaddr").val(""); 632 $("#findemai").val(""); 633 listbyajax(); 634 } 635 </script> 636 </head> 637 638 <body onload="checkcondition()"> 639 <a style="font-size:18px; float:right" id="jumpbtn" ></a> 640 <h2 id="headline"></h2> 641 <hr /> 642 <div id="showview" style="width:800px; text-align:center; height:500px; margin:20px auto;"></div> 643 <div style=" text-align:center; margin:0px auto;"> 644 @2017 feng <a href="view.html">SSM集成框架练习</a> 645 </div> 646 </body> 647 </html>
以上是关于spring-mybatis项目练习 - 通讯录系统，前端的主要内容，如果未能解决你的问题，请参考以下文章
spring-mybatis项目练习 - 通讯录系统，ssm配置文件部分