Ajax请求json

最新推荐文章于 2024-04-26 16:54:26 发布

慕北丶

最新推荐文章于 2024-04-26 16:54:26 发布

阅读量5.8k

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/qq_42539533/article/details/88913504

版权

文章目录

将JSON数据显示到页面

将JSON数据显示到页面

发送异步请求，取得json数据，服务器端将json数据返回给js的回调函数之后，可以在回调函数中输出，但是最终目的不是仅仅将数据输出，而是要将这些json数据显示到页面，此时就需要借助js对dom的操作功能将数据生成到HTML页面了

查询一个雇员信息

emp.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
	<a href="javascript:void(0)">取得一个雇员的信息</a>
	<a href="javascript:void(0)">取得所有雇员的信息</a>
	<br><br/>
	<table border="1">
		<tr>
			<td>编号</td><td>姓名</td><td>职位</td><td>薪资</td><td>领导编号</td>
			<td>入职日期</td><td>佣金</td><td>部门编号</td>
		</tr>
	</table>
</body>
</html>

//为超链接绑定事件，点击之后会发送请求
$(function(){
   
	$("a:first").click(function(){
   
	$("tr:gt(0)").remove();
	//发送请求
	$.ajax({
   
		type:"get",
		url:"emp/get",
		data:"id=7788",
		dataType:"json", //表示可以跨域访问json数据
		async:false, //锁定浏览器，只有请求处理完毕之后（回调函数调用完成之后），才能执行后面的代码
		success:function(data){
   
			//将数据添加到表格中
			$("table").append("<tr>" +
					"<td>" + data.empno + "</td>" +
					"<td>" + data.ename + "</td>" +
					"<td>" + data.job + "</td>" +
					"<td>" + data.sal + "</td>" +
					"<td>" + data.hiredate + "</td>" +
					"<td>" + data.mgr + "</td>" +
					"<td>" + data.comm + "</td>" +
					"<td>" + data.deptno + "</td>" &

最低0.47元/天解锁文章

慕北丶

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求json

文章目录将JSON数据显示到页面查询一个雇员信息取得List集合数据异步请求Map集合数据将JSON数据显示到页面发送异步请求，取得json数据，服务器端将json数据返回给js的回调函数之后，可以在回调函数中输出，但是最终目的不是仅仅将数据输出，而是要将这些json数据显示到页面，此时就需要借助js对dom的操作功能将数据生成到HTML页面了查询一个雇员信息emp.jsp<%@ ...
复制链接

扫一扫