JQuery中使用Ajax实现诸如登录名检测等异步请求Demo
2024-10-16 12:07:05
上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册信息进行检测并实时返回信息,比如这种情况:
对于不需要访问数据库的页面验证比较简单,一旦需要访问数据库,就比较麻烦一些,好在Jquery可以很方便的使用ajax,我写了一个简单到不能再简单的例子,效果是这样的:
下面介绍步骤及代码:
1:jsp页面(重点是jquery函数)如下:
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
3
4 <html>
5 <head>
6 <base href="<%=basePath%>">
7 <script type="text/javascript" src='<c:url value='/jquery-1.5.1.js'/>'></script>
8 <script type="text/javascript">
9 $(function() {
10 $("#username").blur(function() {
11 var uname = $("#username").val();
12 $.ajax({
13 //要请求的服务器url
14 url : "/jqueryTest/JQueryServlet",
15 //表示请求参数的对象,参数:val=uname
16 data : {
17 val : uname
18 },
19 //是否为异步请求
20 async : true,
21 //是否缓存结果
22 cache : false,
23 //请求方式
24 type : "POST",
25 //服务器返回的是什么类型
26 dataType : "json",
27 //函数会在服务器执行成功时被调用,参数result就是服务器返回的值
28 success : function(result) {
29 /* if (result) {
30 $("#nameLabel").text("输入正确");
31 } else {
32 $("#nameLabel").text("用户名不存在");
33 } */
34 $("#nameLabel").text(uname+result.info);
35 }
36 });
37 });
38 });
39 </script>
40 <style type="text/css">
41 </style>
42 </head>
43
44 <body>
45 用户名 <input type="text" name="name" id="username" />
47 <label id="nameLabel"></label><br>
48 密 码:<input type="password" name="pwd" /><br>
51 </body>
52 </html>
新建一个servlet用于处理请求:
package com.wang.test; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class JQueryServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter(); String value=request.getParameter("val");
System.out.println("value:"+value);
/*if(value.equals("wang")){
out.print(true);
}else{
out.print(false);
}*/
if(value.equals("wang")){
String str="{\"name\":\""+value+"\",\"info\":\"合法\"}";
out.print(str);
}else{
String str="{\"name\":\""+value+"\",\"info\":\"不合法\"}";
out.print(str);
}
} }
这里为了简便就没有写访问数据库的诸多代码,如果用书输入"wang",就返回"wang合法",如果输入"somelse",就显示"someelse不合法".
最新文章
- VMware 设备VMnet0 上的网桥暂时关闭。此虚拟机无法与主机或网格中的其他计算机通信【转】
- Asp.Net MVC<;八>;:View的呈现
- IIS/IIS Express/Asp.net配置片段记录
- 用于 Linux 平台的 Java
- win10下 homestead 安装
- C++ exe调用dll文件
- 数据库==>;>;数据查询基础
- 【数据库】如家汉庭酒店2000万开房数据1.71G/BAK,792M/CSV
- Android反射出一个类中的其他类对象并调用其对应方法
- javaweb入门20160305---xml的解析入门
- 嵌入式开发——boa服务器下的ajax与cgi通信
- Mysql 5.6 解压版配置方案
- 201521123003《Java程序设计》第3周学习总结
- MUI 图片上传实现
- Maven-07: 插件的自定义绑定
- ElasticSearch权威指南学习(索引管理)
- 【iCore1S 双核心板_ARM】例程九:DAC实验——输出直流电压
- 如何比sketch和axure更方便地给原型做交互?
- 循环神经网络-RNN进阶
- TypeError: &#39;MongoClient&#39; object is not callable
热门文章
- iOS 让按钮上的标题换行显示
- python 使用__neg__和__iter__
- C# WinForm 导出导入Excel/Doc 完整实例教程[使用Aspose.Cells.dll]
- SQL Server的镜像是基于物理块变化的复制 镜像Failover之后数据的预热问题
- Building Modern Web Apps-构建现代的 Web 应用程序(一些感想)
- 浅谈Android应用保护(零):出发点和背景
- io.js入门(三)—— 所支持的ES6(下)
- 如何理解T-SQL中Merge语句
- [变]C#谜题(1-10)表达式篇
- UITest 单元测试常用的断言