AJAX jQuery的验证用户登录的小程序用IntelliJ IDEA中编写
------------------web/jslib/verify.jsfunction verify(){// 首先测试一下页面的按钮按下，可以调用这个方法// 使用javascript的alert方法，显示一个弹出提示框// alert("按钮被点击了");// 1获取文本框的内容 // document.getElementById("userName"); dom的方式 //Jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点,这是css23定义的表达式方式 //Jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法// $是 jQuery.api中核心中的 jQuery(expression,[context])的$(""); //#是ID选择器 里边是你的名称 var jqueryObj = $("#userName");// 获取节点的值 // .val()是 jQuery.api中属性的值中的 val() // 获取文本框中的值//html中的代码<input type="text" value="some text"/>//jQuery中的代码 $("input").val(); 结果为some text var userName =jqueryObj.val(); // alert(userName);// 2将文本框中的数据发送给服务器端的servlet// 使用jquery的XMLHTTPrequest对象// $.get()是 jQuery.api中Ajax中Ajax事件的jQuery.get(url,[data],[callback],[type])// $.get('AJAXServer?name='+userName,null,callback);}function callback(data){// alert("服务器端的数据回来了"); // 3接收服务器端返回的数据 alert(data);// 4将服务器 端返回的数据动态的显示在页面上 //通过id找到保存结果信息的节点 //$("div").html(val); 是jQury.api中属性html(val)中的方法 $("#result").html(data); }------------------web/web-inf<?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/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <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></web-app>------------------ajax.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <script type="text/javascript" src="jslib/verify.js"></script> <script type="text/javascript" src="jslib/jquery.js"></script></head><body>AjaxServer实例<br> <!-- Ajax不需要form表单来提交数据--><!-- Ajax不需要name--> username:<input type="text" id="userName"/> <input type="button" value="检验" onclick="verify()"/><!-- 这个div用于存放服务器端返回的信息,开始为空--><!-- id属性定义是为了利用dom的方式找到一个节点,进行操作--> <div id="result"></div> <!-- <div>123</div> <div>456</div> <span>123</span> <span>456</span> div和span的差异 div独占一行 span中的内容和其他内容相处良好--></body></html>------------------src/AJAXServer import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;/** * Created by IntelliJ IDEA. * User: Administrator * Date: 2011-1-24 * Time: 14:16:34 * To change this template use File | Settings | File Templates. */public class AJAXServer extends HttpServlet{ protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); } protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try {httpServletResponse.setContentType("text/html;charset=GB2312");PrintWriter out = httpServletResponse.getWriter();//1.取参数String old = httpServletRequest.getParameter("name");//2.检查参数是否有问题 if (old == null || old.length() == 0) {out.println("用户名不能为空");} else {//3.校验操作 String name = old; if (name.equals("zyl")) {//4.将用户感兴趣的数据返回给页面 out.println("用户名[" + name + "]已经存在，请使用其他用户名");} else {out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");}}out.println("返回校验页面");} catch (Exception e) {e.printStackTrace();}}}------------------web/jslib/jQuery.js