步骤1.新建一个java项目：ajaxtrain
步骤2.在WebRoot下新建jslib文件夹，并将jQuery的库（jquery-1.4.2.min.js）放在该目录下
步骤3.新建Servlet
package 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 = -7936252450796205712L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if(old == null || old.length() == 0){
out.println("用户名不能为空！");
}else{
String name = old;
if(name.equals("lichao")){
out.println("用户名为：【"+name+"】的用户名已存在，请选用其他的用户名！");
}else{
out.println("用户名为：【"+name+"】的用户名尚未存在，可以使用该用户名！");
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
在web.xml中：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>servlet.AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
步骤4.新建js文件
function verify(){
//alert("点击了");
//1、获取文本框的内容
//document.getElementById("userName");dom的方式
//jQuery的查找节点的方式，参数中#加上id属性值可以找到一个节点
//jQuery的方法返回的都是jQuery的对象，可以继续在上面执行其他的jQuery方法
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();
//alert(userName);
//2、将文本框中的数据发送给服务器端的servlet
//使用jQuery的XMLHTTPRequest对象get请求的封装
$.get("AJAXServer?name="+userName,null,callback);
}
//回调函数
function callback(data){
//alert("服务器数据回来了！！");
//3、接收服务器端返回的数据
// alert(data);
//4、将数据库端返回的数据动态的显示在页面上
//找到保存结果信息的节点
var resultObj = $("#result");
//动态的改变页面中div节点中的内容
resultObj.html(data);
}
步骤5.新建jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="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>ajax测试注册页面</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!--引入js文件-->
<script type="text/javascript" src="jslib/verify.js"></script>
<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
</head>
<body>
请输入你要注册的用户名：
<input type="text" id="userName"/>
<input type="button" value="注册" onclick="verify()"/>
<div id="result"></div>
</body>
</html>
然后测试运行即可！ OK!!!
分享到：
相关推荐
如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。 参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。 ----------------------------------------------...
jQuery Validation表单验证插件实例合集，是锋利的JQuery第七章中的一个典型实例，一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法，一共包含了7个...
1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. ...
定时局部刷新用到jQuery里面的setInterval方法，setInterval方法两个参数，第一个是设置定时执行的函数名，第二个是时间，如下代码所示，设置每隔10微秒定时执行一次aa方法。 [removed] $(function(){ setInterval...
第1章 jQuery开发入门/1 1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单...
jQuery初学实例代码集，很多的示例，包括一些弹出信息框、无刷新提交、更改字体、颜色选择器、下拉列表操作、无刷新读取数据数据库、层收缩和弹出、一些鼠标特效、导步获取数据、无刷新更改样式表、表格颜色控件等，...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
第1章首先介绍了JavaScript以及各种JavaScript库的作用和对比。然后介绍了jQuery以及jQuery的优势，接下来介绍了配置jQuery环境，编写简单的jQuery代码和jQuery代码的风格。最后对jQuery对象和DOM对象的相互转换，...
有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有： "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
代码中用到了较多的jQuery和部分Ajax（借助jQuery实现），在阅读代码的时候如果不熟悉jQuery和Ajax的话，还是先去稍微学习几个入门实例较好。 二、运行方式： a. 创建数据库:我用的是MySQL 5.1版本，不同版本之间...
##How 使用它实例化一个新的 AjaxForm 类并传入您的元素。 您还可以将选项对象作为第二个参数传递，但这是可选的。 //All options are optional. new AjaxForm ( $ ( '.ajax-form' ) , { dataType : 'text' , /...
第1周 开课介绍 python发展介绍 第一个python程序 变量 字符编码与二进制 字符编码的区别与介绍 用户交互程序 if else流程判断 while 循环 while 循环优化版本 for 循环及作业要求 第2周 本节鸡汤 模块初识 pyc是...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
第1篇介绍了jQuery中的$ document ready 方法 第2篇介绍了前端开发调试工具 Firebug 第3篇介绍了Ajax的核心对象 XMLHttpRequest 第4篇介绍了jQuery中的$ ajax 方法 第5篇介绍了jQuery加载并解析xml 第6篇是第七...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...