（1）取得服务端当前时间
jquery对象.load(url,sendData,function(backData,textStatus,xhr){... ...})
load()：如果无参的话，就以GET方式发送
如果有参的话，就以POST方式发送
（2）检查注册用户名是否存在
$.get(url,sendData,function(backData,textStatus,xhr){... ...})
$.post(url,sendData,function(backData,textStatus,xhr){... ...})
getTime.jsp
1 <%@ page language="java" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
6 </head>
7 <body>
8 <input type="button" value="获取时间"/>
9 <hr/>
10 <div></div>
11 <script type="text/javascript">
12 $(":button").click(function(){
13 /*
14 url表示异步请求的路径
15 sendData表示发送的数据，该数据的格式为{"key":value,"key":value}
16 function(){}表示回调处理函数，由服务端触发，类似于xhr.onreadystatechange
17 */
18 var url = "/jsExamples/TimeServlet?time="+new Date().getTime();
19 var sendData = {"username":"杰克","password":"102030"};
20 //哪个jquery对象调用load()方法，
21 //返回值就设置到这个jquery对象的html()方法中
22 $("div").load(url,sendData,function(backData,textStatus,xhr){
23 alert(backData+":"+textStatus+":"+xhr.status)
24 });
25 });
26 </script>
27 </body>
28 </html>
TimeServlet.java
1 package cn.itcast.web.servlet;
2
3 import java.io.IOException;
4 import java.text.DateFormat;
5 import java.util.Date;
6 import java.util.Locale;
7 import javax.servlet.ServletException;
8 import javax.servlet.http.HttpServlet;
9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11
12 public class TimeServlet extends HttpServlet {
13 public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
14 DateFormat df = DateFormat.getDateTimeInstance(
15 DateFormat.FULL,
16 DateFormat.DEFAULT,
17 Locale.CHINA);
18 String now = df.format(new Date());
19 response.setContentType("text/html;charset=UTF-8");
20 response.getWriter().write(now);
21 }
22 public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
23 request.setCharacterEncoding("UTF-8");
24 response.setContentType("text/html;charset=UTF-8");
25 String ip = request.getRemoteAddr();
26 if(ip.equals("127.0.0.1")){
27 String username = request.getParameter("username");
28 String password = request.getParameter("password");
29 response.getWriter().write(username+":"+password);
30 }
31 }
32 }
ajax_2.jsp 调用$.get()方法
1 <%@ page language="java" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
6 </head>
7 <body>
8 用户名[GET]：<input type="text"/><span></span>
9 <script type="text/javascript">
10 $(":text").blur(function(){
11 //获取用户在文本框中填入的值
12 var username = $(this).val();
13 //去空格
14 username = $.trim(username);
15 //判断
16 if(username==null || username.length==0){
17 $("span").html("用户名必填");
18 }else{
19 /*
20 回调函数有三个参数：
21 backData:表示服务端返回的数据
22 textStatus:表示服务端返回的数据的文本表达，如果成功，返回success
23 xhr:表示ajax引警对象
24 */
25 var url = "/day30/UserServlet?time="+new Date().getTime();
26 var sendData = {"username":username};
27 $.get(url,sendData,function(backData,textStatus,xhr){
28 //定位span标签
29 var $span = $("span");
30 //将清span标签中的内容
31 $span.html("");
32 //创建img标签
33 var $img = $("<img src=‘" + backData + "‘/>")
34 //将img标签设置到span标签内部，形成父子关系
35 $span.append( $img );
36 });
37 }
38 });
39 </script>
40 </body>
41 </html>
ajax_3.jsp调用 $.post()方法
1 <%@ page language="java" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
6 </head>
7 <body>
8 用户名[POST]：<input type="text" name="username"/>
9 <span></span>
10 <script type="text/javascript">
11 $(":text").blur(function(){
12 //获取用户在文本框中填入的值
13 var username = $(this).val();
14 //去空格
15 username = $.trim(username);
16 //判断
17 if(username==null || username.length==0){
18 $("span").html("<font color=‘red‘><b>用户名必填</b></font>");
19 }else{
20 /*
21 回调函数有三个参数：
22 backData:表示服务端返回的数据
23 textStatus:表示服务端返回的数据的文本表达，如果成功，返回success
24 xhr:表示ajax引警对象
25 */
26 var url = "/day30/UserServlet?time="+new Date().getTime();
27 //var sendData = {"username":username};传统
28 var sendData = $(":text").serialize();//优化
29 $.post(url,sendData,function(backData,textStatus,xhr){
30 //定位span标签
31 var $span = $("span");
32 //将清span标签中的内容
33 $span.html("");
34 //创建img标签
35 var $img = $("<img width=‘30‘ height=‘30‘ src=‘" + backData + "‘/>")
36 //将img标签设置到span标签内部，形成父子关系
37 $span.append( $img );
38 });
39 }
40 });
41 </script>
42 </body>
43 </html>
UserServlet.java
1 package cn.itcast.web.servlet;
2
3 import java.io.IOException;
4 import javax.servlet.ServletException;
5 import javax.servlet.http.HttpServlet;
6 import javax.servlet.http.HttpServletRequest;
7 import javax.servlet.http.HttpServletResponse;
8
9 public class UserServlet extends HttpServlet {
10 public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
11 String username = request.getParameter("username");
12 byte[] buf = username.getBytes("ISO8859-1");
13 username = new String(buf,"UTF-8");
14 String imagePath = "images/MsgSent.gif";
15 if("哈哈".equals(username)){
16 imagePath = "images/MsgError.gif";
17 }
18 response.setContentType("text/html;charset=UTF-8");
19 response.getWriter().write(imagePath);
20 }
21 public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
22 request.setCharacterEncoding("UTF-8");
23 String username = request.getParameter("username");
24 String imagePath = "images/MsgSent.gif";
25 if("哈哈".equals(username)){
26 imagePath = "images/MsgError.gif";
27 }
28 response.setContentType("text/html;charset=UTF-8");
29 response.getWriter().write(imagePath);
30 }
31 }
jquery ajax例子
时间： 2024-10-26 13:54:49