ajax验证用户名是否存在

Ajax 2020-05-08
需求： 利用ajax实现 当输入用户名时，验证该用户名是否已经存在，如果存在，给出重新输入用户名，不存在，提示可以使用。简单起见，如果用户名不等于 'shizhan'，则可以使用。

html页面：

[html] view plain copy
  1. <%@pagelanguage="java"pageEncoding="utf-8"%>
  4. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  5. <html>
  6. <head>
  7. <scripttype="text/javascript"src="js/register.js"></script>
  8. </head>
  9. <body>
  10. <form>
  11. 用户名
  12. <inputtype="text"name="username"id="username"/>
  13. <inputtype="button"value="提交"id="btn1"/>
  14. <divid="myDiv"></div>
  15. </form>
  16. </body>
  17. </html>

我们利用js给提交按钮绑定事件。js代码：

[javascript] view plain copy
  1. varxmlhttp;
  3. window.onload=function()
  4. {
  5. varbtn1=document.getElementById("btn1");
  6. btn1.onclick=loadXMLDoc;
  7. }
  10. functionloadXMLDoc()
  11. {
  12. if(window.XMLHttpRequest)
  13. {//codeforIE7+,Firefox,Chrome,Opera,Safari
  14. xmlhttp=newXMLHttpRequest();
  15. }
  16. else
  17. {//codeforIE6,IE5
  18. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  19. }
  20. //绑定回调函数
  21. xmlhttp.onreadystatechange=function()
  22. {
  23. if(xmlhttp.readyState==4&&xmlhttp.status==200)
  24. {
  25. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  26. }
  27. }
  28. //取得输入的值
  29. varname=document.getElementById("username").value;
  30. //第一个参数表示post请求，第二个参数表示提交给AjaxServlet，第三个参数为true，表示异步请求
  31. xmlhttp.open("POST","AjaxServlet",true);
  32. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  33. xmlhttp.send("name="+name);
  34. }

响应的servlet：

[java] view plain copy
  1. packagecom.servlet;
  3. importjava.io.IOException;
  4. importjava.io.PrintWriter;
  5. importjavax.servlet.servletexception;
  6. importjavax.servlet.http.HttpServlet;
  7. importjavax.servlet.http.HttpServletRequest;
  8. importjavax.servlet.http.HttpServletResponse;
  10. publicclassAjaxServletextendsHttpServlet{
  13. publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
  14. throwsservletexception,IOException{
  15. doPost(request,response);
  16. }
  19. publicvoiddoPost(HttpServletRequestrequest,IOException{
  21. response.setContentType("text/html");
  22. response.setCharacterEncoding("utf-8");
  24. PrintWriterout=response.getWriter();
  25. Stringname=request.getParameter("name");
  26. System.out.println(name);
  27. if(name.equals("shizhan"))
  28. {
  29. out.write("用户名已经存在，请更换");
  30. }
  31. else
  32. {
  33. out.write("用户名可以使用");
  34. }
  35. out.flush();
  36. out.close();
  37. }
  39. }

结果页面：

输入sss，点击提交

输入shizhan，点击提交

来源：http://blog.csdn.net/linshizhan/article/details/7915939

相关文章

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但...
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不...
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页...
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以...
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...