【Ajax】实现注册页面判断用户名是否可用的提示—异步加载
- 效果如图
在注册或登录网站时，当我们输入错误格式的账号或信息时，会看到这种提示。
那怎么实现呢，通过ajax异步加载的方式，可以实现不刷新页面就显示出该提示。
- 实现
首先创建一个JSP，写一个简单的页面。
<body>
用户名：<input type="text" name="name" id="xxx"/><label></label><br>
年 龄：<input type="text" name="age"/><br> </body>
然后写一段jQuery函数
实现当用户不输入用户名，鼠标点击年龄输入框 或者 用户名输入不为指定的，则提示用户名输入错误/为空
<script type="text/javascript" src="<c:url value='/jquery-1.5.1.js'/>"></script><!-- 标签，需导入c标签库 -->
<script type="text/javascript">
$(function(){
$("#xxx").blur(function(){//当xxx失去焦点时
var value = $("#xxx").val();//获取id为xxx的元素
$.ajax({
url:"/Tool_Test/AjaxServlet",//要请求服务器URL
data:{val:value},//这是一个对象，它表示请求参数 服务器端可以使用request。getParamet() 来获取
async:true,//是否为异步请求
cache:false,//是否缓存结果
type:"POST",//请求方式
dataType:"json",//服务器返回的数据是什么类型 json:接收一个对象
success:function(result){//这个函数会在服务器执行成功时被调用，参数result就是服务器返回的值
if(result){
$("label").text("正确");
}else{
$("label").text("不能为空/输入错误");
}
}
});
});
});
</script>
当然最后要来一个Servlet
public class AjaxServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String value = request.getParameter("val1");//在adjx的data中进行设置
if(value.equals("zhengbin")){
//用jquery的 ajax回调函数 返回的值就是 print中的字符串
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
- 实现效果
【Ajax】实现注册页面判断用户名是否可用的提示—异步加载的更多相关文章
- C# winform页面可视化设计打开失败，提示未能加载程序集或他的一个依赖项，dll错误
这种情况发生在最初项目是x86属性,改成x64后,一些原来dll,页面没有及时更新,导致页面找不到dll, 最简单的解决方式,把项目属性改成AnyCpu,重新编译下,就可以打开可视化设计窗口了.
- Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在
Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 使用Ajax异步加载页面时，怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- 动态html,异步加载页面的处理
Selenium 基本使用 # 导入 webdriverfrom selenium import webdriver# 调用键盘按键操作时需要引入的Keys包from selenium.webdriv ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- Scrapy爬取Ajax（异步加载）网页实例——简书付费连载
这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...
随机推荐
- 【锋利的JQuery-学习笔记】遮罩层
效果图: 鼠标移动到上面后---> html: <div id="jnBrandList"> <ul> <li> <a href= ...
- CString 转换成 char *
最近用到CString类,转换成 char * 类型,下面介绍用法: 一.CString 和 LPSTR 转换: CString转换成LPSTR: 方法一:CString server; LPSTR ...
- iOS7 兼容及部分细节
1:statusBar字体为白色 在plist里面设置View controller-based status bar appearance 为 NO:设置statusBarStyle 为 UISta ...
- 几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- 想知道吗？CTO 比普通程序员强在哪？
互联网的蓬勃发展,让无数的程序员身价水涨船高,都变成了「香饽饽」,更有了不少「创业」,「当上 CTO,迎娶白富美的传说」.都说不想当元帅的士兵不是好士兵,我觉得这件事见仁见智,但提升自己的价值,让自己 ...
- C++中的const关键字
http://blog.csdn.net/eric_jo/article/details/4138548 C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,本人根据各方 ...
- DllImport的具体用法
现在是更深入地进行探讨的时候了.在对托管代码进行 P/Invoke 调用时,DllImportAttribute 类型扮演着重要的角色.DllImportAttribute 的主要作用是给 CLR 指 ...
- Install wget in Mac OS X Without Homebrew or MacPorts
May 22, 2012 - 31 Comments The command line tool wget lets you retrieve a group of files from FTP an ...
- hdu 4335 What is N?
此题用到的公式:a^b%c=a^(b%phi(c)+phi(c))%c (b>=phi(c)). 1.当n!<phi(p)时,直接暴力掉: 2.当n!>=phi(p) &&a ...
- lintcode：数飞机
数飞机 给出飞机的起飞和降落时间的列表,用 interval 序列表示. 请计算出天上同时最多有多少架飞机? 如果多架飞机降落和起飞在同一时刻,我们认为降落有优先权. 样例 对于每架飞机的起降时间列表 ...