第一个Ajax程序：楼主在此声名此博客仅当自己的参考手册和学习历程的见证。写得不好或有什么问题请进入博客的朋友们提宝贵意见，同时对于楼主博客不屑一顾的朋友们也不要乱加评断，你可以选择浮云就当没看见。谢谢——
1.前台页面：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<h3>用户名输入校验的例子</h3>
<input name="username" type="text" id="username"><br>
<input type="button" value="检验" onclick="verify()">
<div id="result"></div>
</body>
</html>
2.导入js文件和jquery库：
1>jQuert库在网上可以找到不多作介绍。
2>
function verify(){
//1.获取文本框中的内容
//document.getElementById("username");dom的方式
//Jquery的查找节点的方式，参数上#加上属性值可以找到一个节点
//jQuery的方法返回的都是jQuery的对象，可以继续在上面执行其他的jQuery方法
var jQueryObj = $('#username');
//获取节点的值
var userName = jQueryObj.val();
//alert(userName);
//2.将文本框的数据发送给服务器的Servlet
//使用jQuery的XMLHTTPrequest对象get请求的封装
$.get("servlet/AJAXServer?name="+userName,null,callback);
}
//回调函数
function callback(data){
document.charset="UTF-8";
//3.接受服务器返回的数据
//alert("服务器段的数据回来了"+data);
//4.将服务器返回的数据动态的显示在页面上
//找到保存结果信息的节点<div id=result>
var resultObj = $('#result');
//动态的改变页面的div节点中的内容
resultObj.html(data);
}
3.定义Servlet类：
package com.zchen.ajax.servlet;
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 AJAXServer extends HttpServlet {
private static final long serialVersionUID = 3611240119854641367L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
if (name.equals("admin")) {
out.println("用户名[" + name + "]已经存在。");
} else {
out.println("用户名[" + name + "]尚未存在。");
out.println("<br/><a href=\'index.jsp\'>返回校验页面</a>");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
4.配置web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>com.zchen.ajax.servlet.AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/servlet/AJAXServer</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
verify.js简写：
function verify(){
$.get("servlet/AJAXServer?name="+$('#username').val(),null,function(data){
$('#result').html(data)
});
}
分享到：
相关推荐
在上一篇文章//www.jb51.net/article/83504.htm中，用javascript实现了用户验证，但并没有对密码进行验证，这次追加了这个功能，并分别用javascript和jquery实现。 一.用jquery的ajax实现的关键代码 实现如下 /*...
jquery如何实现简单的表单验证，我们先跟...这里用了一个判断is()，如果是用户名，做相应的处理，如果是邮件做相应的验证。 在jQuery框架中，也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this
1.在静态页面里添加文本框及样式和js脚本的引用： ...<head id=”Head1″ runat=”server”> <...script language =”javascript” src =”../jquery-1.3.2.min.js” type =”text/javascript
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器，充分向读者演示了如何使用jQuery的各项技术，实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发，对最实用的...
XMLHttpRequest实现Ajax，回调函数，Ajax数据交换格式(HTML、XML、JSON)，Ajax发送GET和POST请求，异步编程模型和同步编程模型，解决Ajax的GET请求缓存问题，使用Ajax验证用户名是否可用、省和城市多级联动等案例。...
对于一个表单验证您可以简单的试一下。 <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('form :input').blur(function(){ $(this).removeClass("warning").parents("td") .find("span.error").remove() .end...
推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架： [b]formValidator[/b] 它能监听到所有控件类型、所有数据格式，还有ajax异步验证功能(例如用户注册时去数据库...
第1章 jQuery基础知识 1 1.1 jQuery的安装 1 1.2 选择DOM节点 2 1.3 延迟JavaScript的执行 3 1.4 把CSS应用到元素上 3 1.5 选择一系列非标准的HTML元素 4 1.6 计数DOM节点和显示其文本 5 1.7 获得一个元素的HTML...
验证2 使用 jquery-validate 插件和 yeoman 前端管理器的练习表 2 给定一个包含名称、电子邮件、url 和评论字段的表单（除了 url，都是必需的）。 您能否集成验证插件带来的西班牙语本地化文件以节省您的自定义错误...
运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、...
JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法，JQuery.validate.js是对JQuery的一个插件，可以认为是对JQuery在某个特殊场景下的扩展，而Validate就是对表单验证提供的扩展。 . 场景解释 用户进行注册...
使用此javascript源，您可以使用生成器来验证主题林项目的购买代码，买方将输入其envato用户名，购买代码和网站网址，并在该项目中输入输出代码，并使该版本只能与此网址一起使用。 -如何确保我的Envato物品安全？ ...
运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、...
运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、...
在我们开发Web程序中，有一块经常要用到，如唯一性检测和自动匹配，唯一性检测一般用在如博客域名唯一性检测，用户名唯一性检测，当然使用到的还是Ajax，比较简单，我写了个js实现，需要进行唯一性检测的话，很简单...
运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、...
运用HTML、CSS、JavaScript、jQuery等相关技术设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交...
运用HTML、CSS、JavaScript、jQuery等相关技术设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交...
运用HTML、CSS、JavaScript、jQuery等相关技术设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交...
运用HTML、CSS、JavaScript、jQuery等相关技术设计一个爱旅行旅游网站，要求网站具有用户登录验证、用户登陆后显示用户名，分为管理员、注册用户、游客三种访问权限，管理员可以修改后台信息、用户可以浏览和提交...