【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 ...
随机推荐
- StringTokenizer用法
import java.util.StringTokenizer; public class StringTokenizerTest { public static void main(String[ ...
- Class
1. No const constructor Unlike other member functions, constructors may not be declared as const . W ...
- TDD 用语
OOP 封装 继承 多态 SOLID SRP 单一职责 Single Responsibility Principle OCP 开放封闭 Open/Close Principle LS ...
- Sina App Engine(SAE)入门教程(8)- SaeFetchurl使用
fetchurl是什么? FetchURL是SAE为开发者提供的分布式网页抓取服务,用来同步的抓取http页面,FetchURL针对国内的网络的做了优化,内部有调度系统,尽可能保证用户快速的抓取到目标 ...
- JAVA学习路线图---（JAVA1234）
第一阶段-Java基础 这一阶段很重要,关系到你后面阶段的学习,所以务必把这一阶段掌握好: 如果你是0基本,我推荐一本比较好的,适合初学者看的书:明日科技的<Java从入门到精通>,最 ...
- NSArray 迭代
NSObject *obj=[[NSObject alloc]init]; NSArray *array=[[NSArray alloc] initWithObjects:@" ...
- 纯后台生成highcharts图片有哪些方法?
比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢?本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只能 ...
- Java API —— BigInteger类
1.BigInteger类概述 可以让超过Integer范围内的数据进行运算 2.构造方法 public BigInteger(String val) 3.BigInteger类 ...
- mysqldump常用于MySQL数据库逻辑备份
mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...
- ios7 webapp touch bug
// ios7 touchstart bug if(navigator.userAgent.indexOf("iPhone OS 7") != -1){ var startX = ...