【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 ...
随机推荐
- linux下如何导入导出MySQL数据库
一.导出:用mysqldump命令行命令格式mysqldump -u 用户名 -p 数据库名 > 数据库名.sql范例:mysqldump -u root -p abc > abc.sql ...
- UNDERSTANDING CALLBACK FUNCTIONS IN JAVASCRIPT
转自: http://recurial.com/programming/understanding-callback-functions-in-javascript/ Callback functio ...
- Embedding Lua in C: Using Lua from inside C.
Requirments: 1: The Lua Sources. 2: A C compiler - cc/gcc/g++ for Unix, and Visual C++ for Wi ...
- mutable关键字
mutalbe的中文意思是“可变的,易变的”,跟constant(既C++中的const)是反义词.在C++中,mutable也是为了突破const的限制而设置的.被mutable修饰的变量(muta ...
- mysql 多表 update sql语句总结
mysql 多表 update 有几种不同的写法. 假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Price:另外一张表是ProductPrice表,我们要将ProductP ...
- Linux awk小记
预备知识: -F:表示某行使用的分隔符,默认是空格: NR:表示当前是第几行: NF:表示文件中的某行根据分隔符共有几列: 1.打印某一列 awk '{print $1}' text.txt 其中$0 ...
- 李洪强iOS开发之【零基础学习iOS开发】【01-前言】02-准备
在上一讲中,介绍了什么是iOS开发.说简单一点,iOS开发,就是开发运行在iPhone或者iPad上的软件.这么一说完,应该有很多人就会产生一些疑惑,比如学习iOS开发是不是一定要买iPhone?需不 ...
- 李洪强iOS开发之keychain的使用
通常情况下,我们用NSUserDefaults存储数据信息,但是对于一些私密信息,比如密码.证书等等,就需要使用更为安全的keychain了.keychain里保存的信息不会因App被删除而丢失,在用 ...
- Project Euler 95:Amicable chains 亲和数链
Amicable chains The proper divisors of a number are all the divisors excluding the number itself. Fo ...
- windows下安装ubantu
首先声明我是一个linux大菜鸟,之所以学这个,一个是好玩,另外做DL的一些软件如Caffe要在这个平台上运行,所以没事就鼓捣鼓捣.linux是一种内核,市场上支持这种内核的操作系统有uban ...