AJAX第五步：使用ajax解决页面首页显示后台数据的问题_ajax页面一加载数据就出来怎么实现-优快云博客

本文链接：https://blog.youkuaiyun.com/zxc_helloworld/article/details/77855361

最近做项目的时候遇到一个小问题，比如一个购物界面的首页中物品的数据是如何一访问到首页就显示出来的？后来发现可以用jquery里面的方法，实现在jsp页面加在完毕时触发ajax，显示出数据，下面写一个简单例子，其中servlet和前面第四步中是同一个。

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>Insert title here</title>
</head>
<body>
<div id="ajax2"></div>
<div id="ajax3"></div>
<div id="ajax4"></div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
		$.ajax({
			type : "POST" ,
			async : true,
			url :"${pageContext.request.contextPath}/JqueryAjaxDemo",
			data : {"id" : 123 , "name" : "zxc"},  //传递参数
			dataType : "json",     //规定了返回类型   也可以不规定在 直接$.each($.parseJSON(result),function(id,json){});
			error : function(){alrt('error');},
			success : function(result){
				$.each(result,function(id,json){
					$("#ajax2").append(id+json.id+json.name+json.age);
					$("#ajax3").html("<h1>hello</h1>");
					$("#ajax4").text("<h1>hello</h1>");
				});
			}

		});
});
</script>
</html>