博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX练习(一):制作可以自动校验的表单(从原理上分析ajax的作用)
阅读量:5827 次
发布时间:2019-06-18

本文共 2122 字,大约阅读时间需要 7 分钟。

继上文()作为联系。

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

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

1.搭建框架

首先为html框架

2.建立异步请求

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

输用户名

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

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

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

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

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.");%>

4.显示异步查询的结果

在用户输入表单其它项目时,异步返回结果已经在后台悄悄完成。

function showResult(sText) {                var oSpan = document.getElementById("UserResult");                oSpan.innerHTML = sText;                if (sText.indexOf("already exists") >= 0)                //如果用户名已被占用                    oSpan.style.color = "red";                else                    oSpan.style.color = "black";            }

以上代码是对服务器返回结果的显示。

该案例的完整代码

            

 

转载于:https://www.cnblogs.com/ahthw/p/4230067.html

你可能感兴趣的文章
分类器性能度量
查看>>
windows 环境下切换 python2 与 pythone3 以及常用命令
查看>>
docker 基础
查看>>
C++中STRING转为INT (转)
查看>>
ASP.NET上传多个文件
查看>>
学习:UTF-8和GBK的区别
查看>>
Shape parameter 形状参数
查看>>
【求助】小系统组成大系统所遇到的问题
查看>>
js 中英文字符串长度
查看>>
让xp系统(win2003系统)支持搜索文件内容
查看>>
聊一聊前端的监控
查看>>
数据结构java版之大O表示法
查看>>
数据结构与算法(十四)深入理解红黑树和JDK TreeMap和TreeSet源码分析
查看>>
ES6的开发环境搭建
查看>>
我的这套VuePress主题你熟悉吧
查看>>
Redis在Web项目中的应用与实践
查看>>
linux下使用su切换到其他用户下只能看到sh-4.2$解决
查看>>
[LeetCode题解] ZigZag Conversion
查看>>
表单系列之input number总结
查看>>
刷屏的海底捞超级APP究竟是怎样与阿里云合作的
查看>>