jQueryAjax++servlet+json实现页面加载时从后台读取数据

在eclipse中新建一个项目,我起名为Demo

新建一个html文件,在其中引入外部jQuery和自定义的js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="js.js"></script>
<title>Insert title here</title>
</head>
<body>

</body>
</html>

新建一个servlet,使用doPost()方法,在其中手动写一个json字符串,并将传输文件类型设置为json,传输字符编码设置为utf-8,将浏览器解析方式设置为utf-8

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String jsonStr="{\"dataStr\":\"我是json!\"}";//双引号之前的\代表将后面的双引号转义,不会使它和前面的双引号匹配
		response.setContentType("application/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");//设置浏览器按utf-8格式解析
		response.getWriter().write(jsonStr);//发送响应
	}

在自定义的js中写拿回后台数据之后的逻辑,这里为了简单,直接在网页上弹出提示框像是数据

$(document).ready(function()
		{
			$.ajax({
				type:"post",
				url:"http://localhost:8080/Demo/DemoSer",
				async:true,
				data:{},
				success:function(data)//成功取回数据之后的回调函数
				{
					alert("传回的数据是:"+data.dataStr);
				},
				error:function()//没能取回数据之后的回调函数
				{
					alert("请求失败!");
				}
			});
		});

部署项目,启动服务器,打开网页:

在这里插入图片描述

成功!

猜你喜欢

转载自blog.csdn.net/qq_37856300/article/details/83052496