基于jquery的ajax小例子

酷的飞上天空

浏览: 521735 次
性别:
来自: 无锡

最近访客更多访客>>

yuanliangding

北极光之吻

gggfff39

932835425

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE

Ajax jQuery json JavaScript Servlet

献给那些懒得看jquery文档的人。

jquery比较常用的Ajax方法是$.ajax(),$.post(),$.get()，后两个是根据前一个方法的简略形式。

这里只介绍$.post()方法。

使用格式如下：

$.post(url [,data] [,fn] [,type]);

url:请求服务器端的路径,

data:可选参数，请求附带的参数。一个json格式的对象如：{"id":1,"name":'json'}

fn:可选参数，请求成功后的回调函数。一般为一个匿名的函数

type:可选参数，返回的类型，默认返回类型根据http的MIME决定。可以为xml,html,json,text等

完整调用如下：

$.post("ajax",{},function(){alert('OK');},"text");

也可简化为

$.post("ajax",function(){alert('OK')});

或者用多行显示

$.post("ajax",function(){

alert('OK')}

);

小例子如下。功能为单机按钮，从服务器端传回此时的时间

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于jquery的ajax小例子</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	function ajax(){
		//请求ajax页面，此为一个servlet。 data用于接收服务器端传回的数据
		$.post("ajax",function(data){
			$("div").eq(1).append("现在时间："+data+"<br />");
		});
	}
</script>
</head>
<body>
<div>
	<button onclick="ajax()">发送信息</button>
</div>
<div>

</div>
</body>
</html>

处理的servlet

public class AjaxServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		SimpleDateFormat sim = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String nowDateString = sim.format(new Date());
		resp.getWriter().print(nowDateString);
	}

}

如果要返回json格式的数据则改写如下：

jsp改写内容，就是添加了json参数，和以data.date的形式访问数据。jquery1.4中也可以根据返回的mime自动判断类型，不需要指定json参数。但返回的mime类型为application/json

<script type="text/javascript">
	function ajax(){
		//请求ajax页面，此为一个servlet。 data用于接收服务器端传回的数据
		$.post("ajax",function(data){
			alert(data);
			$("div").eq(1).append("现在时间："+data.date+"<br />");
		},"json");
	}
</script>

改写后的servlet为

public class AjaxServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		SimpleDateFormat sim = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String nowDateString = sim.format(new Date());
		StringBuilder sb = new StringBuilder();
		//构造字符串如下：{"date":"1877-12-09 12:23:12"}
		//因为使用的是jquery1.4，此版本解析json格式很严格，属性名称必须要加双引号
		sb.append("{\"date\":").append("\"").append(nowDateString).append("\"}");
		resp.getWriter().print(sb.toString());
	}

}

这要注意的是在jquery1.4之前的版本{date:"1877-12-09 12:23:12"}是可以被解析为一个json对象的，但在1.4的版本中则只能为{"date":"1877-12-09 12:23:12"}。否则解析失败

分享到：

Java继承的一点问题 | 地址栏的伪静态处理

2010-05-29 15:01
浏览 1854
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论