jquery 实例

index.js<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript" src="js/nameValidate.js" mce_src="js/nameValidate.js"></mce:script> <link rel="stylesheet" type="text/css" href="css/css.css" mce_href="css/css.css"> </head> <body> <form > <span id="u"> userName:</span> <input type="text" name="userName" id="userName" class="userName"> <span id="display"> <font color="red"> 请输入用户名</font> </span> <br> <input type="button" name="sub" id="sub"> </form> </body> </html> 

nameValida//页面刚刚装载好时运行此function //ready 是一个函数,参数是又 是一个函数, //效果相当于,<body onload=""> $(document).ready(function() { // // alert(" document ready"); // 按下id=sub的button后 将会执行里的function $("#userName").blur(action_); //当input内有内容的时候 ,红框的提示消失,变成 普通的颜色 $("#userName").keyup(keyup_action); }) function action_() { // alert("click button"); var userName = $("#userName").val(); if (userName == "") { alert("username mustn't be empty"); } else { // 通过 ajax 和server交互 $.post() $.get(); $.get("http://127.0.0.1:8888/jquery/userValidate?userName=" + encodeURI( encodeURI(userName)), null, function(response) { // 把response 返回的内容放在<div id="display"></div> $("#display").html(decodeURI(response)); } ); } } function keyup_action(){ $("#userName").removeClass("userName"); } 

 

 

css/css.css

 

 

//class 选择器 .userName{border: 1px solid red; } //id选择器 #userName2{border: 1px solid red; }  import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class UserValidate extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String userName = request.getParameter("userName"); URLDecoder decoder = new URLDecoder(); String u1 = decoder.decode(userName,"utf-8"); System.out.println(u1); if (userName.length() < 6) { //注意这里的是userName 而不是解码后的u1 out .println(userName + "<font color='red'>the length must not less than 6</font>"); } else { out .println(userName + " <font color=/"green/">congratulations userName validate</font>"); } System.out.println("=========================" + userName); out.flush(); out.close(); } } 

你可能感兴趣的:(jquery,function,String,action,button,stylesheet)