当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
helloAjax.jsp页面: <%@ page language="java" pageEncoding="utf-8" %> <html> <h
简单的JQuery(AJAX)+SpringMVC的小例子,实现将对象以JSON的形式返回给页面。 (本例包含一个HelloWor
django jquery ajax 的一个小例子 Using Django templates with jQuery AJAX 2009 January 6 tags:
开始学习jQuery了,准备在博客上记录下来,就当做备忘! 表格隔行换色 HTML代码 <html> <h
最近写的jquery;练习小程序,有兴趣的同学可以学习下: <!doctype html> <html> <h
开始学习jQuery了,准备在博客上记录下来,就当做备忘! 表格隔行换色 HTML代码 <html> <h
最近写的jquery;练习小程序,有兴趣的同学可以学习下: <!doctype html> <html> <h
  哈哈,终于我也在博客园开通博客了,怎么说现在我也算进入it行业了,以后看来要在这里好好开垦
本来是一个示例来试试jQuery中的几个方法,通过实验来学习使用jQuery提供的便捷的Ajax,例子有点长,
本来是一个示例来试试jQuery中的几个方法,通过实验来学习使用jQuery提供的便捷的Ajax,例子有点长,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号