很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性;从而确保用户之间不拥有相同的用户名和电子邮件地址;一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一些网站会做实时的用户名和电子邮件地址可用性检查,例如:“用户名”文本框失去焦点时;就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求。

在人事档案中,基础信息的要保证每人只能有一条(如下图)

倘若不限制,难以保证信息不重复,这样会造成数据的冗余,大量数据的重复与信息的不对称,给用户以信息的错觉,解决这个问题我们要等录入数据的人员在输入他人身份证号时需要去数据库中查找是否已经存在,如果使用以前的方法当提交时在来判断对客户来说太不友好了,提交时:个人的信息输入了很多,倘若判断存在了,输入过的信息会由于界面的刷新而丢失,此时考虑到实时检测而使用Ajax、Jquery来解决此问题,Ajax异步提交数据,时刻可以检测,我初步考虑是当输入完身份证号的文本框鼠标移除之后,来判断身份证号是否已经存在,以下是自己实现的过程。

首先看一下网上资料

下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息。

在人事中填写基础信息的界面输入身份证号时,实施检查,当文本框失去焦点时对信息进行实时检查 ,身份证号失去焦点时,触发页面发送Ajax请求,调用后台的方法,到数据库中判断身份证信息是否存在,接着把查询结果返回到前端界面中,提示用户。

原理:

人事实例:

<td height="25" align="right" class="style17">
身份证号
:</td>
<td height="25" align="left" class="style19">
<input type="text" id="txtidNumber" onblur="JudgeUserName()" width="140px" /> </td>
<script type="text/javascript">
function JudgeUserName() {
//获取页面中的控件的输入的值
browers = +$("#txtidNumber").val();
//定义类型并将值传递给参数params
var params = '{browersType:"' + browers + '"}';
$.ajax({//调用ajax后台数据异步方法
//提交的方式
type: "Post",
//数据的传送页面:要启动界面的地址/界面的后台的方法
url: "Add.aspx/SayHello",
contentType: "application/json; charset=utf-8",
data: params,
//传到服务器的参数类型
dataType: "json", //重要的后台的回调函数(很重要)
success: function (data) {
//返回提示给界面效果
alert(data.d); },
//出错提示
error: function (err) {
alert(err);
}
});
}

后台代码:

这个是jquery下Ajax方法调用后台方法。

这个方法有几点需要说明:

type方式必须是post,再有就是后台的方法必须是静态的,方法声明要加上特性[System.Web.Services.WebMethod()],传递的参数个数也应该和方法的参数相同。这个自己调试很长时间,找了好多资料才调试好的。

[System.Web.Services.WebMethod()]
public static string SayHello(string browersType)
{
//创建数据库连接
SqlConnection con = new SqlConnection("server=.;database=PersonnelFiles;uid=sa;pwd=123456;");
//打开连接
con.Open();
//查询前台传过来的数据数据库中是否存在此数据
SqlCommand cmd = new SqlCommand("select Count(*) from T_BasicInformation where idNumber='" + browersType + "'", con);
//返回有的条数
int count = Convert.ToInt32(cmd.ExecuteScalar());
//加以判断
if (count > 0)
{
return "此人个人信息已经存在,请修改原有信息!"; }
else
{
return "可以正确注册";
} }

实现的效果图:

图1:

图2

总结

这两天经过调试这个、实现此功能,加深了对视频中的基础知识的理解、断点调试的熟悉,Ajax知识很多、但是重点的也几部分,接下来一篇文章总结asp中Jquery、Ajax的实现异步操作的几种方式,掌握了最基本的原理,其余几种方法都是类似的,只是处理不同的类型而已。

AJAX+jQuery+ASP实现实时验证身份证信息是否已存在---人事系统的更多相关文章

  1. JAVA代码验证身份证信息

    java验证身份证信息代码 转自:http://www.blogjava.net/xylz/archive/2011/01/05/342330.html import java.util.Calend ...

  2. ajax初探--实现简单实时验证

    学习技术最好的方式就是在做中学,做一个小demo来对前端输入进行实时验证. 利用ajax技术和Sevlet技术来实现,使用原生的js. 源码可访问,我的Github 什么是ajax Ajax 即&qu ...

  3. jquery表单实时验证

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ajax jquery 异步表单验证

    文件目录: html代码: <html> <head> <title>异步表单验证</title> <script type='text/java ...

  5. 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  6. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  7. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. jQuery validation学习(2)验证身份证

    验证邮编 jQuery.validator.addMethod("isZipCode", function(value, element) { -]{}$/; return thi ...

  9. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

随机推荐

  1. JVM初探- 内存分配、GC原理与垃圾收集器

    JVM初探- 内存分配.GC原理与垃圾收集器 标签 : JVM JVM内存的分配与回收大致可分为如下4个步骤: 何时分配 -> 怎样分配 -> 何时回收 -> 怎样回收. 除了在概念 ...

  2. Java对象的访问定位

    java对象在访问的时候,我们需要通过java虚拟机栈的reference类型的数据去操作具体的对象.由于reference类型在java虚拟机规范中只规定了一个对象的引用,并没有定义这个这个引用应该 ...

  3. CDH集群安装&测试总结

    0.绪论 之前完全没有接触过大数据相关的东西,都是书上啊,媒体上各种吹嘘啊,我对大数据,集群啊,分布式计算等等概念真是高山仰止,充满了仰望之情,觉得这些东西是这样的: 当我搭建的过程中,发现这些东西是 ...

  4. Android 结合实际项目学会ListView局部刷新和相关知识《一》

    转载本专栏博客,请注明出处:道龙的博客 最近在公司参与的项目中有一个界面需要做局部UI更新处理,把其化烦为简为Demoi形式写在这里.我们还是运行该Demo,知道ListView局部刷新的使用场景:( ...

  5. OpenCV + Python 人脸检测

    必备知识 Haar-like opencv api 读取图片 灰度转换 画图 显示图像 获取人脸识别训练数据 探测人脸 处理人脸探测的结果 实例 图片素材 人脸检测代码 人脸检测结果 总结 下午的时候 ...

  6. Android Multimedia框架总结(十一)CodeC部分之AwesomePlayer到OMX服务

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52623882 前言:上篇文< ...

  7. 在Windows Service 2012上安装IIS 8.0 IIS 6

    我的目的是在服务器上安装IIS6 ,但是受到这边文章的启发和按照他的步骤,看到了"IIS 6管理兼容性",我的问题就决解了,我这里是因为要安装vss 2005 和u8等比较早期的软 ...

  8. Dynamics CRM 开启图表的3D效果展示

    CRM中的图表在我们的业务场景中用的很多,用户可以根据自己的实际需求来构建图表查看数据.我们平时看到的图表都是平面的,像下图中的这种,那有没有一种方式可以让展示3D效果看起来更立体呢,答案是可以的. ...

  9. Hive-RCFile文件存储格式

    在新建Hive表时,可以使用stored as rcfile来指定hive文件的存储方式为RCFile. 一.RCFile文件结构 下图是一个RCFile的文件结构形式. 从上图可以看出: 1)一张表 ...

  10. Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现

    Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...