ajax 登录验证

1. 使用 jquery 框架：下载 jquery.js
2. 新建一个 web 工程 ajax ；
3. 在 webRoot 下新建一个 jslib 文件夹：专门存放 js 文件；
4. 在 webRoot 下新建一个 html/jsp 页面： login.html

   

< script type = "text/javascript" src = "jslib/jquery.js" ></ script >

< script type = "text/javascript" src = "jslib/verify.js" ></ script >  

</ head >

< body >

  < h1 > 用户校验 </ h1 >

  <!-- ajax 中可以不用 form 表单的提交 -->

  <!--input 标签中不需要用 name 属性，只用 id 属性就行了 -->

  <!-- 用 id 属性是为了使用 dom-->

      < input type = "text" id = "username" />< br />

      < input type = "button" value = " 校验 " onclick = "verify()" />

  <!--div 为空是为了存放服务器返回的信息 -->

     < div id = "result" ></ div >

</ body >

1. 在 jslib 下新建一个 js 文件： verify.js ；

  

 

function verify()

        {

         var paramObj=encodeURI(encodeURI($( "#username" ).val()));

         $.get( "TestSvlt?username=" +paramObj, null ,callback);

        }

  function callback(data)

        {

            var resultObj=$( "#result" );

            resultObj.html(data);

        }

 

1. 新建一个 servlet ： AjaxLogin 类；在 doGet 方法中写
   

2. response.setContentType( "text/html;charset=utf-8" );

           PrintWriter out=response.getWriter();

           String name=request.getParameter( "username" );

           String username= URLDecoder.decode (name, "UTF-8" );

           System. out .println(username);

            if ( null ==username|| "" .equals(username))

            {

                out.print( "username is not null" );

            }

           else

            {

                if (! "lej" .equals(username))

                {

                    out.print(username+ " not existing" );

                }

                else {

                    out.print(username+ "  login successs" );

                }

            }