ajax 异步请求

  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>密&nbsp;&nbsp;&nbsp;码：<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>