JQuery的第一天实战学习
1、按照下面的工程来建：
2、新建UserVerify.html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jquery实战</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <link type="text/css" rel="stylesheet" href="css/UserVerify.css"/> <script type="text/javascript" src="js/jquery-1.11.3.js" ></script> <script type="text/javascript" src="js/UserVerify.js" ></script> </head> <body> <table> <tr> <td> 请输入用户名称: </td> <td> <input type="text" id="userName" /> </td> <td> <div id="verifyResult"></div> </td> </tr> <tr> <td></td> <td></td> <td><input type="button" value="校验" id="verifyButton" /></td> </tr> </table> </body> </html>
3、新建css/UserVerify.css文件
.nameClass{
/*控制文本框的边框是红色的实线*/
border:1px solid red;
background-image:url(../images/userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}
4、新建js/UserVerify.js文件
/* *需要通过javascript代码来做2件事情： *1、button被点击的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到div中，看到结果； *2、文本框上，用户按键后，需要判断文本框中的内容是否为空，否，红色的边框和背景图取消，是，则留 */ /* * */ $(document).ready(function(){ //页面装载完，执行以下代码： //需要找到button按钮，注册事件 $("#verifyButton").click(function(){ //alert("Button click"); //1、获取文本框的内容； var userName = $("#userName").val(); //2、将这个内容发送给服务器端 if(userName == "") { alert("用户姓名不能为空"); } else { //alert(userName); try { $.get("http://localhost:8080/150702JQuery/userVerify?userName="+encodeURI(encodeURI(userName)),null,function(response){ //3、接受服务器端返回的数据，填充到div中 $("#verifyResult").html(response); }); } catch(e) { alert(e.error); alert(e.message); } } }); //需要找到文本框，注册事件 $("#userName").keyup(function(){ var userName = $(this).val(); if(userName == "") { $(this).addClass("nameClass"); } else { $(this).removeClass("nameClass"); } }); });
5、添加额外的文件：
images/userVerify.gif
以上实现的样式如下图所示：
1）刚打开的样式：
2）输值却为空，则会改变文本框的样式：
6、新建UserVerifyServlet.java类：
package com.jquery.servlet; import java.io.IOException; import java.io.PrintWriter; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class UserVerifyServlet extends HttpServlet{ private static final long serialVersionUID = 2348662049635889701L; public void init() { System.out.println("init UserVerifyServlet"); } public void service(HttpServletRequest request,HttpServletResponse response) { String userName = (String)request.getParameter("userName"); try { userName = URLDecoder.decode(userName,"UTF-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); out.println("用户姓名【"+userName+"】可以注册"); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } }
7、在web.xml文件里增加：
<servlet> <servlet-name>userVerify</servlet-name> <servlet-class>com.jquery.servlet.UserVerifyServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>userVerify</servlet-name> <url-pattern>/userVerify</url-pattern> </servlet-mapping>
增加servlet类后，实现：
输入值后，点击校验按钮，通过ajax访问服务器端，返回数据页面div里展示：
