转：一个传智播客的JQuery例子
传统的和Ajax的区别，Ajax使用JQuery库（框架）看视频，忍不住保存下来了。
web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app 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/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>ClassicServer</servlet-name> <servlet-class>ClassicServer</servlet-class> </servlet> <servlet> <servlet-name>AJAXServer</servlet-name> <servlet-class>AJAXServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AJAXServer</servlet-name> <url-pattern>/AJAXServer</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ClassicServer</servlet-name> <url-pattern>/ClassicServer</url-pattern> </servlet-mapping></web-app>
Servlet类AJAXServer
import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;/** * Created by IntelliJ IDEA. * User: xw * Date: 2010-2-2 * Time: 20:32:53 * To change this template use File | Settings | File Templates. */public class AJAXServer extends HttpServlet{ protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doPost(httpServletRequest, httpServletResponse); } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter out = httpServletResponse.getWriter(); //1，取参数 String old = httpServletRequest.getParameter("name"); //2，检查参数是否有问题 if (old==null || old.length()==0){ out.println("用户名不能为空"); } else{ String name = old; //3，校验操作 if ("nick".equals(name)){ //4，输出回去的是数据，不是页面。 out.println("用户名["+name+"]已经存在。"); }else{ out.println("用户名["+name+"]尚未存在。"); } } } catch(Exception e){ e.printStackTrace(); } }}
ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>ajax用户校验实例</title><script type="text/javascript" src="jslib/jquery-1.2.6.js"></script><script type="text/javascript" src="jslib/verify1.js"></script></head><body> 用户校验ajax的实例,请输入用户名：<br/> <input type="text" id="userName" /> <input type="button" value="校验" /> <div id="result"></div> </body></html>
新手的verify.js
//定义用户校验的方法function verify(){ //alert("A"); //1，获取文本框的内容 var jqueryObj = $("#userName"); //获取节点的值 var userName = jqueryObj.val(); //alert(userName); //2，将文本框中的数据发送给服务器的Servlet //get有三个参数 参看JQuery API //http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html $.get("AJAXServer?name="+userName,null,callBack);}//回调函数function callBack(data){ //alert("服务器端的数据回来了！"); //3，接收服务器端返回的数据 //alert(data); //4，将服务端返回的数据动态显示到页面 //找到结果信息的节点 var resultObj = $("#result"); resultObj.html(data); }
熟悉了，直接这样写了verify1.js
function verify(){ var userName = $('#userName').val(); alert(userName); $.get("AJAXServer?name="+ userName, null, function (data){ $("#result").html(data); });}
页:
[1]