jquery实现Ajax请求的三种方式

最新推荐文章于 2024-07-29 20:46:57 发布

E1ffC1

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量1.5w

点赞数 3

分类专栏： Ajax 文章标签： ajax jquery json 异步请求数据

本文链接：https://blog.csdn.net/qq_37176126/article/details/73277972

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery 对 ajax的请求进行了封装，可以使代码更简洁,也自动替我们解决了，浏览器问题。

jquery 提供了三种 ajax 请求的函数，分别为： $.ajax() , $.get() , $.post() ，下面是一个 jquery 实现ajax 请求的实例：

效果：页面加载完成时，自动发起ajax请求，从后台获取数据，并显示在页面表格中：

页面代码：

<body>
<table align="center" cellpadding="20" width="300" cellspacing="0" border="1" bordercolor="#a0c6e5">
	<tbody id="tbBody"></tbody>
</table>
</body>

Ajax请求

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url : "AjaxJson",	//请求url
			type : "POST",	//请求类型  post|get
		 // data : "key=value&key1=value2",	//后台用 request.getParameter("key");
			dataType : "json",  //返回数据的 类型 text|json|html--
			success : function(users){	//回调函数 和 后台返回的 数据
			//	var users = JSON.parse(data);
				var tBody = $("#tbBody");
				for(var i=0; i<users.length; i++){  //通过遍历，创建行数据
					var tr = $("<tr><td>"+users[i].id+"</td><td>"+users[i].name+"</td><td>"+users[i].school+"</td></tr>")
					tBody.append(tr);
				}
			}
		});
	});
	// get 方式 发送请求
	// $.get(url,data,callback,type); data为 发送的数据  {key:value}形式 ， 
	//	callback成功时的回调函数 function(result){}  result 后台返回的数据  ，
	//type  返回的数据类型  默认为 text ,可以设为 json text 
	//post 方式 发送请求
	// $.post(url,data,callback,type);
	
</script>

后台 servlet 代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setHeader("Content-Type", "text/html;charSet=utf-8");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		User user1 = new User(1,"liuyj1","henu1");
		User user2 = new User(2,"liuyj2","henu2");
		User user3 = new User(3,"liuyj3","henu3");
		List<User> users = new ArrayList<User>();
		users.add(user1);
		users.add(user2);
		users.add(user3);
		/* 使用 Gson 插件，将 java对象 转为 json 格式的字符串 导入 Gson 的jar包即可

		Gson gson = new Gson();
		String userStr= gson.toJson(users);*/
		
		//使用 FastJson 插件，将 java对象 转为 json 格式的字符串 导入 FastJson 的jar包即可
		String userStr = JSON.toJSONString(users);
		out.println(userStr);
		out.flush();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

效果：当访问这个页面时，自动获取后台数据，加载在页面表格中