将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>
login.js
//为超链接绑定事件,点击之后会发送请求
$(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>" &