`
Cantonese
  • 浏览: 4187 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax进行异步校验

ajaxweb 
阅读更多
  1. <html>  
  2. <head><title>异步验证</title></head>  
  3. <body>  
  4. <script language="JavaScript">  
  5.     var xmlHttp;  
  6.     var flag;  
  7.     function createXMLHttp(){  
  8.         if (window.XMLHttpRequest){                     // 创建XMLHttpRequest核心对象  
  9.             xmlHttp = new XMLHttpRequest()                  // 使用FireFox内核  
  10.         }else {  
  11.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   // 使用IE内核的浏览器  
  12.         }  
  13.     }  
  14.   
  15.     function checkUserid(userid){       // 显示信息  
  16.         createXMLHttp();    //  
  17.         // 设置请求,通过地址重写方式将userid传递到JSP中  
  18.           
  19.         xmlHttp.open("POST","CheckServlet?userid="+userid);  
  20.         // 设置完请求后调用处理回调函数  
  21.         xmlHttp.onreadystatechange = checkUseridCallback;  
  22.         xmlHttp.send(null); // 发送请求，不设置参数  
  23.         //document.getElementById("msg").innerHTML = "正在验证……";  
  24.                 //alert("*******");  
  25.   
  26.     }  
  27.   
  28.     function checkUseridCallback(){ // 回调函数  
  29.         if (xmlHttp.readyState == 4){           // 数据返回完毕  
  30.             if (xmlHttp.status == 200){         // HTTP操作正常  
  31.                 alert("*****8");  
  32.                 var text = xmlHttp.responseText;// 接收返回内容  
  33.                 if (text == "true"){  
  34.                     flag = false;               // 无法提交表单  
  35.                     document.getElementById("msg").innerHTML = "用户名ID重复，无法使用";  
  36.                 }else {  
  37.                     flag = true;                // 可以提交表单  
  38.                     document.getElementById("msg").innerHTML = "恭喜！此用户ID可以注册";  
  39.                 }  
  40.             }  
  41.         }  
  42.     }  
  43.   
  44.     function checkForm(){   // 对表单判断能否进行提交操作  
  45.         return flag;  
  46.     }  
  47. </script>  
  48.     <form action="xxx.jsp" method="post" onsubmit="return checkForm()">  
  49.         用户ID：<input type="text" name="userid" onblur="checkUserid(this.value)"><span id="msg"></span><br>  
  50.         姓  名：<input type="text" name="name"><br>  
  51.         密  码：<input type="password" name="password"><br>  
  52.         <input type="submit" value="注册">  
  53.         <input type="reset" value="重置">  
  54.     </form>  
  55. </body>  
  56. <html>  

 

 

 


 Sevlet.java

 

[java] view plaincopy
  1. package zz.ajax;  
  2. import java.io.*;  
  3. import java.sql.Connection;  
  4. import java.sql.DriverManager;  
  5. import java.sql.ResultSet;  
  6. import java.sql.PreparedStatement;  
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11. public class CheckServlet extends HttpServlet{  
  12.     public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";  
  13.     public static final String DBURL = "jdbc:mysql://localhost:3306/zz";  
  14.     public static final String DBUSER = "root";  
  15.     public static final String DBPASSWORD = "mysql";  
  16.   
  17.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  18.                throws ServletException,java.io.IOException{  
  19.         this.doPost(request, response);  
  20.     }  
  21.   
  22.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  23.                throws ServletException,java.io.IOException{  
  24.         request.setCharacterEncoding("GBK");  
  25.         response.setContentType("text/html");       // 设置回应的MIME  
  26.         Connection conn = null;  
  27.         PreparedStatement pstmt = null;  
  28.         ResultSet rs = null;  
  29.         PrintWriter out = response.getWriter();     // 接收验证的userid  
  30.         String userid = request.getParameter("userid");  
  31.         try{  
  32.             Class.forName(DBDRIVER);    // 加载驱动  
  33.             conn = DriverManager.  
  34.                 getConnection(DBURL, DBUSER, DBPASSWORD);   // 连接数据库  
  35.   
  36.             String sql = "SELECT COUNT(userid) FROM user WHERE userid=?";  
  37.             pstmt = conn.prepareStatement(sql);  
  38.             pstmt.setString(1, userid);  
  39.             rs = pstmt.executeQuery();  
  40.             System.out.printf("*********");  
  41.             if (rs.next()){  
  42.                 if (rs.getInt(1) > 0){       // 判断ID是否已存在  
  43.                     out.print("true");      // 已存在  
  44.                 }else {  
  45.                     out.print("false");  
  46.                 }  
  47.             }  
  48.             out.close();  
  49.               
  50.         }catch (Exception e){  
  51.             e.printStackTrace();  
  52.         }finally {  
  53.             try{  
  54.                 conn.close();  
  55.             }catch (Exception e){  
  56.                 e.printStackTrace();  
  57.             }  
  58.         }  
  59.     }  
  60.   
  61. }   
分享到：
struts2防止表单二次提交
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    异步校验jquery-ajax

    本工程有两种ajax异步校验注册时输入的username是否与数据库中的值重复，通过mybatis实现数据库，通过servlet或者struts2实现控制层，通过ajax，jquery，json，实现异步校验

    ajax的异步校验功能实现

    对于异步校验，我们可以利用jQuery的`$.ajax()`函数或者更简单的`$.get()`或`$.post()`方法。 下面是一个使用jQuery实现的用户名异步校验的基本步骤： 1. **事件监听**：我们需要监听用户的输入，例如当用户离开...

    案例_Ajax_用户名异步校验 源代码

    综上所述，这个Ajax用户名异步校验案例涉及了Web开发中的客户端脚本、服务器端交互、数据库查询等多个层面，是提升用户体验的重要技术实践。学习并理解这个案例，有助于开发者更好地掌握Ajax技术，并将其应用到实际...

    javascript将异步校验表单改写为同步表单.docx

    - **用户体验**：如果异步校验失败，用户可能需要多次尝试才能成功提交表单。 - **代码复杂度**：异步编程本身增加了代码的复杂性和维护难度。 因此，在某些情况下，将异步校验改为同步校验成为一种需求。本篇文档...

    图文验证码（Ajax异步校验）-源码出自明日科技

    【图文验证码（Ajax异步校验）】是一种常见的网络安全机制，用于防止自动化程序（如机器人）非法操作网站，如注册、登录或提交表单。在本项目中，明日科技提供了完整的源码实现，旨在帮助开发者理解和应用此类验证码...

    Ajax 异步请求-校验用户名唯一性

    通过以上步骤，我们就实现了Ajax异步请求校验用户名唯一性的功能。这个过程涉及到前端交互、HTTP请求、后端处理以及数据库查询，充分展示了MVC架构和Ajax技术在实际项目中的应用。注意在实际开发中，还要考虑错误...

    jquery easyUI中ajax异步校验用户名

    在jquery easyUI中实现ajax异步校验用户名，可以有效地提高用户体验，同时保证数据的准确性和安全性。 首先，要实现jquery easyUI中ajax异步校验用户名，需要对jquery及jquery easyUI有一定的了解。在前端页面中...

    使用AJAX完成用户名是否存在异步校验

    使用AJAX完成用户名是否存在异步校验: 1.事件触发: * onblur 2.编写AJAX代码: * 项Action中提交:传递username参数 3.编写Action * 接收username:模型驱动接收. 4.* 编写实体类 * User * User.hbm.xml * 配置到spring...

    S2SH+jQuery+JSON+Ajax注册--异步校验

    标题 "S2SH+jQuery+JSON+Ajax注册--异步校验" 提及的技术栈主要包含四个关键部分：Struts2 (S2)，Spring，Hibernate（SSH）这三大企业级开发框架，以及jQuery、JSON和Ajax这三者组成的前端交互技术。这篇博客文章...

    网页中使用传统方法实现异步校验详解

    在网页开发中，异步校验是一种常见的技术，主要用于提高用户体验，例如在用户输入时实时检查数据的有效性或唯一性。本项目深入探讨了如何利用传统方法实现异步验证，特别是针对用户名的唯一性检查。这里我们将详细...

    ajax用户身份校验

    **Ajax用户身份校验**是Web开发中一种常见的功能实现，它允许在不刷新整个页面的情况下，通过异步方式向服务器发送请求，检查输入的用户名是否已经被其他用户占用。这种方式提高了用户体验，因为用户可以在输入时...

    详解javascript传统方法实现异步校验

    在探讨JavaScript实现异步校验的传统方法中，我们通常首先接触到的技术是XMLHttpRequest，它是早期Web开发中进行AJAX请求的基石。AJAX全称是异步JavaScript和XML，是一种在无需重新加载整个页面的情况下，能够更新...

    用户名校验（ajax技术）

    Ajax的核心是利用JavaScript与服务器进行异步数据交换，增强了用户体验，使得页面交互更加流畅。本教程主要针对初学者，讲解如何使用Ajax进行简单的用户名校验。 一、Ajax基础 Ajax的核心组件包括XMLHttpRequest...

    Ajax实现验证码校验

    Ajax实现验证码校验，不用跳转页面，直接刷新层。简单实用

    jquery+jsp+图形验证码异步校验

    在这个"jquery+jsp+图形验证码异步校验"的项目中，我们将探讨如何结合jQuery、JavaServer Pages (JSP)以及图形验证码来实现异步验证。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件...

    异步表单验证

    arr[0].posturl("/FormValidation/ajax/ajax-validation.asmx/user_isNull", "name"); arr[0].check("tname", "td1", "checkusername", true, true); //密码验证 arr[1] = new XQValidation(); arr[1]....

    jquery ajax 异步验证

    - **定义**: AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript进行异步通信的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。 - **背景**: AJAX的概念最早由...

    ajax实现二级下拉框和用户名校验

    Ajax可以在此场景中发挥作用，通过在用户输入时或输入结束后立即发送校验请求，而不必等待用户提交表单。 **实现步骤：** 1. 创建一个HTML输入框，用于用户输入用户名。 2. 使用JavaScript（可能结合事件委托）监听...

Magicbox
Global site tag (gtag.js) - Google Analytics