1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 request.setAttribute("path", request.getContextPath()); 5 %> 6 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 7 8 <!DOCTYPE html > 9 <html> 10 <head> 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 12 <title>Insert title here</title> 13 <script type="text/javascript" src="${path }/js/jquery-3.2.1.min.js"></script> 14 <script type="text/javascript"> 15 var flag; 16 function reg() { 17 //1.获取文本框内容 18 var uname = $("#uname").val(); 19 //2.把文本框的内容发送到服务器匹配数据库中的用户名 使用ajax一步提交请求 20 /* $.ajax({ 21 url : "${path}/checkName",//定义请求服务器的地址 22 data : { 23 uname : uname 24 }, //定义往服务器传输的数据 25 type : "get",//提交请求的方式 get post 26 dataType : "json",//定义服务器响应的数据类型 text json jsonp 支持跨域 27 success : function(result) { 28 //result 服务器响应回来的结果 29 if(result){ 30 alert("用户名可以使用"); 31 $("#msg").html(""); 32 }else{ 33 $("#msg").html("用户名不可以使用"); 34 alert("用户名不可以使用") 35 } 36 }//定义请求成功之后如果处理 37 }); */ 38 39 40 //1 41 //第一个url 第二个data数据 第三个参数是 规定当请求成功时运行的函数 42 //第四个参数服务器响应的类型 43 /* $.get("${path}/checkName",{uname:uname},function(data,status){ 44 alert("data:"+data+"------status:"+status); 45 if(data){ 46 $("#msg").html(""); 47 }else{ 48 $("#msg").html("用户名不可以使用"); 49 } 50 },"json"); */ 51 52 //2 53 /* $.post("${path}/checkName",{uname:uname},function(data,status){ 54 alert("data:"+data+"------status:"+status); 55 if(data){ 56 $("#msg").html(""); 57 }else{ 58 $("#msg").html("用户名不可以使用"); 59 } 60 },"json"); 61 */ 62 63 //3 64 $.getJSON("${path}/checkName",{uname:uname},function(data,status){ 65 alert("data:"+data+"------status:"+status); 66 if(data){ 67 $("#msg").html(""); 68 flag=true; 69 }else{ 70 $("#msg").html("用户名不可以使用"); 71 flag=false; 72 } 73 },"json"); 74 75 } 76 77 $(function(){ 78 // 79 $("#myform").submit(function(){ 80 //判断用户名是否存在 81 $.getJSON("${path}/checkName",{uname:uname},function(data,status){ 82 alert("data:"+data+"------status:"+status); 83 if(data){ 84 $("#msg").html(""); 85 flag=true; 86 }else{ 87 $("#msg").html("用户名不可以使用"); 88 flag=false; 89 } 90 },"json"); 91 }); 92 }); 93 </script> 94 </head> 95 <body> 96 97 <form action="" method="post" id="myform"> 98 <table align="center"> 99 <tr> 100 <td>用户名：<input type="text" id="uname" name="uname" 101 onblur="reg()" /><span id="msg"></span><br /></td> 102 </tr> 103 <tr> 104 <td>密 码：<input type="password" id="upass" 105 name="upass" /><br /></td> 106 </tr> 107 108 <tr align="center"> 109 <td><input type="submit" value="注册" /> 110 <td> 111 </tr> 112 </table> 113 </form> 114 </body> 115 </html>