基于jquery的ajax小例子

最新推荐文章于 2025-08-22 10:24:20 发布

flyflyfly55555

最新推荐文章于 2025-08-22 10:24:20 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： J2EE 文章标签： Ajax jQuery json JavaScript Servlet ViewUI

本文链接：https://blog.youkuaiyun.com/flyflyfly55555/article/details/83635977

J2EE 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨jQuery中$.post()方法的使用，包括其基本语法、参数解释以及通过实例展示如何利用$.post()从服务器获取数据，并进行简单的数据处理和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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