JQuery基础:一个用户名校验的例子 -

chain_cl

浏览: 6501 次
性别:
来自: 重庆

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery基础:一个用户名校验的例子

博客分类：

AJAX

jQuery Ajax Servlet 应用服务器 JavaScript

来源:传智博客视频讲解

条件准备:jquery-1.3.2.js
下载地址[url]http://code.google.com/p/jqueryjs/downloads/detail?
name=jquery-1.3.2.js[/url]

Java代码
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;
import java.net.URLDecoder;

/**
* User: chain
* Date: 2009-3-11
* Time: 13:56:28
* To change this template use File | Settings | File Templates.
*/
public class AJAXServer extends HttpServlet {

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
                                                        throws ServletException, IOException {
                   this.doGet(httpServletRequest, httpServletResponse);
    }

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=gb18030");
        try {
        //1.取参数
            PrintWriter out = resp.getWriter();
            String old = req.getParameter("name");
            System.out.println("old = " + old);
         //2.检查参数是否有问题
            if(old == null || old.length() == 0) {
                out.println("用户名不能为空");
            } else {
//                String name = URLDecoder.decode(old, "UTF-8");
//                byte[] by = old.getBytes("ISO8859-1");
//                String name = new String(by, "utf-8");
                String name = old;
            //3.校验操作
                if(name.equals("wangxingkui")) {
         //4.和传统应用不同之处.这一步需要将用户感兴趣的数据返回给页面段.
        // 而不是将一个新的页面发送给客户
                    out.println("用户名[" + name + "]已经存在，请使用其他用户");
                } else {
                    out.println("用户名[" + name + "]尚未存在");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户名校验ajax</title>
<meta content="text/html;charset=gb2312" />
<script type="text/javascript" src="jslib/verify.js"></script>
<script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
</head>
<body>
     <h1>ajxa用户名校验</h1>
     <hr size="1" />
     
     
         请输入用户名: <br />
     
     <input type="text" id="userName" />
     <input type="button" value="校验" onclick="verify()" />
     
     
     <div id="result"></div>
</body>
</html>

verify.js文件

//定义校验用户名的方法
function verify() {
    //首先测试一下页面的按钮按下,可以调用这个方法
    //使用JavaScript的alert方法,显示一个提示框
    //alert("按钮被点击了!!!");

    //1.获取文本框中的内容
    //document.getElementById("");
    //Jquery的查找方式,参数中#加上id属性值可以找到一个节点
    //JQuery的方法返回的都是JQuery的对象,可以继续在上面执行其他哦JQuery方法
    $("#userName").css("border", "1px solid red");
    var jqueryObj= $("#userName");
    var userName = jqueryObj.val();
    alert(userName);
    //获取节点的值
    //2.将文本框中的数据
    //使用jquery的XMLHTTPrequest对象get请求的封装
    $.get("AJAXServer?name" + userName, null, callback);

}

//回调函数
function callback(data) {
    alert("服务器端的数据回来了!!!!!!" + data);
    //3.接收服务器端返回的数据

    //4.将服务器端返回的数据动态显示在页面上
    //找到保存结果信息的节点
    var resultObj = $("#result");
    //动态的改变页面中div节点中的内容
    resultObj.html(data);
    alert("");
}

分享到：

symfony的安装

2009-03-12 00:08
浏览 2340
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery基础:一个用户名校验的例子

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery基础:一个用户名校验的例子

评论

发表评论

相关推荐

最近访客更多访客>>