• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > 零基础学习AJAX之制作自动校验的表单

零基础学习AJAX之制作自动校验的表单

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了零基础学习AJAX之制作自动校验的表单等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

传统网页在注册时检测用户名是否被占用,传统的校验显然缓慢笨拙。

当ajax出现后,这种体验有了很大的改观,因为在用户填写表单时,签名的表单项已经发送给了服务器,然后根据用户填写好的内容进行数据查询。在查询号无需页面刷新就自动给了提示。类似这样的应用大大的提高了用户的体验,本节简单介绍自动校验表单制作方法。从原理上分析ajax的作用。

1.搭建框架

首先为html框架

    <form name="register">
            <p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p>
            <p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p>
            <p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p>
            <p><input type="submit" value="注册"></p>
            <p><input type="reset" value="重置"></p>
        </form>
</div>

2.建立异步请求

当用户输完“用户名”开始输入别的表单时进行后台校验,代码如下:

输用户名<input type="text" name="User" id="User" onblur="startCheck(this)">
在函数startCheck()中,直接发送this关键字,将文本框对象自己作为参数传递,而函数本身则首先判断用户是否输入为空,如果为空,则直接返回,并聚焦用户名文本框,给出相应的提示。

function startCheck(oInput){
                //判断是否有输入,没有输入则直接返回。
                if(!oInput.value){
                    oInput.focus();//聚焦到用户名文本框
                    document.getElementById("User").innerHTML="用户名不能为空";
                    return;
                }
                //创建异步请求
                //....
            }
</div>

当用户输入用户名后,用toLowerCase()转化为小写字母,并建立异步请求。

其中showResult()函数用于显示服务器处理返回的responseText文本。

<script type="text/javascript">
            var xmlHttp;
            function createXMLHttprequest() {
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
            }
            function startCheck(oInput) {
                //判断是否有输入,没有输入则直接返回。
                if (!oInput.value) {
                    oInput.focus(); //聚焦到用户名文本框
                    document.getElementById("User").innerHTML = "用户名不能为空";
                    return;
                }
                //创建异步请求
                createXMLHttpRequest();
                var sUrl = "1-9.aspx?user=" + oInput.value.toLowerCase() + "×tamp=" + new Date().getTime();
                xmlHttp.open("GET", sUrl, true);
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                        showResult(xmlHttp.responseText); //显示服务结果
                }
                xmlHttp.send(null);
            }
        </script>
</div>

3.服务器处理

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.CacheControl = "no-cache";
    Response.AddHeader("Pragma","no-cache");
   
    if(Request["user"]=="isaac")
        Response.Write("Sorry, " + Request["user"] + " already exists.");
    else
        Response.Write(Request["user"]+" is ok.");
%>
</div><

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11使用对象封装ajax重复调用的方法
  • 2017-05-11SpringMVC环境下实现的Ajax异步请求JSON格式数据
  • 2017-05-11AJAX中文乱码问题探讨及解决
  • 2017-05-11关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结
  • 2017-05-11[ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类&lt;Object&gt;的扩展
  • 2017-05-11Ajax中数据传递的另一种模式 javascript Object Notation思想(JSON)
  • 2017-05-11十大最佳Ajax教程收集(图文)
  • 2017-05-11用AJAX技术聚合RSS
  • 2017-05-11简单谈谈AJAX核心对象
  • 2017-05-11AJAX实现简单的注册页面异步请求实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 163 AJAX Tab
    • Ajax实现带有验证码的局部刷新登录界面
    • Ajax同步和异步问题浅析及解决方法
    • jQuery AJAX实现调用页面后台方法
    • Ajax 和 Asp 的编程
    • 浅析json与jsonp区别及通过ajax获得json数据后格式的转换
    • 如何将ajax请求返回的Json格式数据循环输出成table形式
    • 比getjson好的底层函数是哪个有什么优点
    • Ajax in action 英文版配书源码 下载
    • 使用对象封装ajax重复调用的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有