AJax技术

Ajax的惯用技巧(1)-实现表单数据验证

字号+ 作者:H5之家 来源:H5之家 2018-02-10 11:00 我要评论( )

Ajax的常用技巧(1)----实现表单数据验证 为了保证信息的有效性和正确性,防止数据的错误和无效,在使用数据之前,通常要对浏览者在客户端输入的数据进行验证。但是这种处理方式并不能解决所有的验证问题,例如,在进行用户信息注册时,客户端只能实现类是

Ajax的常用技巧(1)----实现表单数据验证

 为了保证信息的有效性和正确性,防止数据的错误和无效,在使用数据之前,通常要对浏览者在客户端输入的数据进行验证。但是这种处理方式并不能解决所有的验证问题,例如,在进行用户信息注册时,客户端只能实现类似是否填写了必要的信息,长度是否满足需求等基本的有效性检查,但是对于所填写的用户信息是否已经被占用等诸如此类的检查,在客户端脚本中是没有办法实现的。
同时,如果按照传统的方式将此类验证逻辑放在服务端实现,也会因为面临需要整个页面刷新的问题,而使得问题不能以直观的方式迅速显示在用户面前。借助Ajax技术,在异步交互的前提下,调用服务器端事先编写好的验证逻辑,可以很好的解决此问题。
数据的验证有两方面的含义,一方面是数据格式正确性的验证;一种是数据数值的验证。通常数据格式的验证都是在客户端进行,而数据数值的验证在服务器端进行。在使用Ajax技术进行数据验证时,应该确保数据格式验证要优先于数据数字验证。
现在创建一个实例,以显示Ajax技术的数据验证功能。该实例验证分为两部分,一部分是数据格式验证;一部分是数据数值验证。为了更加有效地反应表单数据验证,这里采用了数据库表中的数据验证。
注意:为了减少程序操作的复杂度,突出Ajax表单中的数据验证功能。这里采用了Access数据库。


1,服务器端代码


该实例服务器端代码主要具有两个功能,首先查询客户端传递的名称在数据库中是否存在,如果存在,则不允许数据插入到数据库中;如果查询数据不存在,则向数据库表中插入数据。该实例需要使用数据库操作,故单独创建一个jsp文件链接数据。打开记事本,输入下列代码:

<%@ page language="java" import="java.util.*,java.io.File,java.sql.*" pageEncoding="GBK"%> <%@page contentType="text/html;charset=gb2312"%> <% int status=0; String name=request.getParameter("name"); name=new String(name.getBytes("ISO-8859-1"), "UTF-8"); // out.print(name); String insertSql="insert into test (NAME) values ('"+name+"')"; String sql="select * from test where"; String dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb"; String user=""; String password=""; try{ Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection c=DriverManager.getConnection(dbUr1,user,password); Statement s=c.createStatement(); ResultSet r=s.executeQuery(sql); if(r.next()){ status=1; } else{ s.executeUpdate(insertSql); } s.close(); }catch(Exception e){ e.printStackTrace(); } out.print(status); %>

可见创建了变量status,当存在时,status赋值为1,否则赋值为0,最后返回status。

2,客户端代码


客户端代码主要用来校验数据格式和异步传输数据。打开记事本,输入下列代码:

<%@ page language="java" import="java.util.*,com.njue.DBManager.*" pageEncoding="GBK"%> <html> <head> <title>Simple AjaxExample </title> <script type="text/javascript"> var xmlHttp; var name; var password; var password1; function createXMLHttpRequest(){ if(window.ActiveXObject) { xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象 } else if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象 } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange=handleStateChange; xmlHttp.open("POST", "Ran.jsp", true); var str="name="+name; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(str); } function handleStateChange() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { if( xmlHttp.responseText==1) document.getElementById("nameInfo").innerHTML="<font color='red'>该昵称已存在</font>"; else alert("恭喜你,注册成功!"); } } } function check(){ if(name==""){ document.getElementById("nameInfo").innerHTML="<font color='red'>昵称不能为空!</font>"; return false; } else if(password==""){ document.getElementById("passwordInfo").innerHTML="<font color='red'>密码不能为空!</font>"; return false; } else if(password1==""){ document.getElementById("password1Info").innerHTML="<font color='red'>密码不能为空!</font>"; return false; } else if(password!=password1){ document.getElementById("password1Info").innerHTML="<font color='red'>两次输入的密码不一致!</font>"; return false; } else { clear(); return true; } } function exec(){ clear(); name=document.getElementById("userName").value; password=document.getElementById("passWord").value; password1=document.getElementById("passWord1").value; if(check()==true){ startRequest(); } } function clear(){ document.getElementById("nameInfo").innerHTML=""; document.getElementById("passwordInfo").innerHTML=""; document.getElementById("password1Info").innerHTML=""; } </script> </head> <body> <form action="#"> <div align="center"> <table border="1" > <tr><td align="center" valign="center"> 昵称: <input id="userName"/><div id="nameInfo"></div><br/></td></tr> <tr><td>请输入密码: <input type="password" id="passWord"/><div id="passwordInfo"></div><br/></td></tr> <tr><td> 请再次输入密码: <input type="password" id="passWord1"/><div id="password1Info"></div><br/><tr/><td/> <tr><td><input type="button" value="注册" onclick="exec(); "/></td></tr> </table> </div> </form> </body> </html>


 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 分享JavaScript监听全部Ajax请求事件的方法

    分享JavaScript监听全部Ajax请求事件的方法

    2018-02-10 15:01

  • Django框架如何使用ajax的post方法,djangoajax

    Django框架如何使用ajax的post方法,djangoajax

    2018-02-10 10:16

  • Prototype使用学习手册指南之ajax.js

    Prototype使用学习手册指南之ajax.js

    2018-02-09 16:04

  • ajax获取数据中文乱码问题最简单的完美解决方案

    ajax获取数据中文乱码问题最简单的完美解决方案

    2018-02-09 11:01

网友点评