力所能及第二步ajax学习直播---get异步提交

最新推荐文章于 2024-10-04 08:00:00 发布

张小竟

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量559

点赞数

分类专栏： ajax 文章标签： ajax get提交示例

本文链接：https://blog.csdn.net/zhanglu1236789/article/details/41865513

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小狼从上回做第二单元项目开始就对ajax充满了好奇，看着别人的代码，总是觉得什么能让数据不通过刷新页面完成提交，从而知道用户输入的用户名是否已经输入过。未来研究这个神奇的事情，今天，小狼完成了ajax异步的get提交

首先，先把后台写好

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
        String name=request.getParameter("uname");
        
        boolean uexits=false;
        if("admin".equals(name)){
        	uexits=true;
        	out.print(uexits);//输出
        }else{
        	out.print(uexits);
        }
        
		out.flush();
		out.close();
	}

显而易见，这是一个servlet，小狼主要是觉得这是一个练习，自然是怎么简单怎么来，就不用struts了。

其次，写一个表单

 <form name="myform" action="ajax.do"> 
      <table align="center">
         <tr>
             <td>用户账户:</td>
             <td><input name="uname" οnblur="checkUser(this)"/></td>
         </tr>
         <tr>
             <td>用户密码:</td>
             <td><input name="pass1" type="password"/></td>
         </tr>
         <tr>
             <td>重复密码:</td>
             <td><input name="pass2" type="password"/></td>
         </tr>
         <tr>
             <td><input name="submit" type="submit" value="submit"/></td>
             <td><input name="reset" type="reset" value="reset"/></td>
         </tr>
      
      </table>
 </form>

接下来，就是我们的重头戏了。。。。ajax大神

  var xmlHttpRequest;
	     function checkUser(ouser){
	         var uname=ouser.value;
	         if(!uname){
	             alert("用户的账号不为空");
	             ouser.focus();
	             return ;
	         }
	         var url="ajax.do?uname="+uname;
	         xmlHttpRequest=createXmlHttpRequest();
	         
	         xmlHttpRequest.onreadystatechange=checkStatus;
	         
	         
	         xmlHttpRequest.open("GET",url,true);
	         
	         xmlHttpRequest.send(null);
	     }
	     //这是一个回调函数，处理完成对后台的数据的处理后的内容
	     function checkStatus(){
	        if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
	            var result=xmlHttpRequest.responseText;
                   //用正则表达式去掉首尾空格
	            result=result.replace(/(^\s*)|(\s*$)/g,"");
	            //判断servlet的输出
	            if(result=="true"){
	                alert("用户名已经存在");
	            }else{
	                alert("用户名可以使用");
	            }
	        
	        }
	     
	     }
             //这是小狼上一篇讲的东西，就不叙述了
	     function createXmlHttpRequest(){
	         if(window.XMLHttpRequest){
	             return new XMLHttpRequest();
	         }else{
	             return  new ActiveXObject("Microsoft.XMLHTTP");
	         }
	     
	     }

此示例，小狼都自己亲自实践过，绝对ok，如果您觉得有用，就给小狼一个关注吧