ajax入门实例使用jQuery

1028826685

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

最近访客更多访客>>

stingice

u014594108

f641385712

StartKeep

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

ajax入门实例使用jQuery

下面就ajax入门做了一个简单的实例：
下面我们就开始吧

第一步：导入我们需要的jqurery.js在这里和我们myeclipse中有所不同需要我们去到工程的目录下把jqurery.js复制在我们在web目录新建的jslib目录中，这个目录用来存放我们的.js文件就是javascript脚本 jqurery.js封装了许多的js我们只需去调用就行

第二步：编写一个Servlet 在src目录中新建一个AJAXServer

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{
//            request.setCharacterEncoding("UTF-8");
//            response.setContentType("text/html;charset=gb18030");

            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();

            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
            int temp = 0;
            if (inte == null) {
                temp = 1;
            } else {
                temp = inte.intValue() + 1;
            }
            httpServletRequest.getSession().setAttribute("total",temp);

            //1.取参数
            String old = httpServletRequest.getParameter("name");
            //String name = new String(old.getBytes("iso8859-1"),"UTF-8");
             String name=null;
            if(!old.equals("") && (old != null))
            {
                 name = URLDecoder.decode(old,"UTF-8");
            }
            //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 = URLDecoder.decode(old,"utf-8");
                //3.校验操作
//                String name = old;
                if(name.equals("liyong")){
                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);
                } else{
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);
                }
            }
        } 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></title>
     <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
    ajax验证输入用户名：<br/>
     <input type="text" id="userName" >
    <input type="button" value="校验" onclick="verify()">
    <div id="result"></div>
</body>
</html>

第四步：编写上面需要的verify() js函数

//定义用户名校验
        function verify()
        {
           //通过ID找到这个节点
           var jQuryObj=$("#userName");
           //获取这个节点属性值
           var username=jQuryObj.val();
           //使用jQuery的XMLHTTPrequest对象的get请求的封装，代码运行到这里会继续向下运行
           //当服务器有数据返回的时候就去回调这个回调函数callback这里必须是函数名不能带有参数
           $.get("AJAXServer?name="+username,null,callback);
//    alert(username);
        }
        function callback(data)
        {
            //alert("服务器数据返回");
            //alert(data);
            var resultObj=$("#result");
            resultObj.html(data)
    }

第五步：部署运行...

ajax.zip (81.3 KB)
下载次数: 0

jquery.zip (29.9 KB)
下载次数: 0

分享到：

Mysql 乱码解决 | 在intellij中HttpServlet不能导入

2012-06-07 16:46
浏览 1550
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论