当前位置:首页 > 开发 > Web前端 > Jquery > 正文

基于jquery的ajax小例子

发表于: 2010-05-29   作者:酷的飞上天空   来源:转载   浏览:
摘要: 献给那些懒得看jquery文档的人。 jquery比较常用的Ajax方法是$.ajax(),$.post(),$.get(),后两个是根据前一个方法的简略形式。 这里只介绍$.post()方法。 使用格式如下: $.post(url [,data] [,fn] [,type]);   url:请求服务器端的路径, data:可选参数,请求附带的参数。一个json格式的对象如

献给那些懒得看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"}。否则解析失败



 

基于jquery的ajax小例子

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号