jQuery-Ajax
Ajax
ajax作用：通过JavaScript代码向网络上的地址发送异步请求。
格式：
$('#btn').click(function () {
$.ajax({
type: 'GET',
// 也可以向网络地址 http://www.xxxx.com 发送请求。
url: 'data.json',
success: function (arg) {
console.log(arg);
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
</head>
<body>
<input type="button" id="btn" value="获取数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$.ajax({
type: 'GET',
// 也可以向网络地址 http://www.xxxx.com 发送请求。
url: 'data.json',
success: function (arg) {
console.log(arg);
}
})
});
})
</script>
</body>
</html>
基于ajax实现数据管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="btn" value="获取数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$.ajax({
type: 'GET',
// 也可以向网络地址 http://www.xxxx.com 发送请求。
url: 'data.json',
success: function (arg) {
console.log(arg);
// 1 先制作出所有的tr标签
var s = '';
for (var i in arg){
var a = '<tr><td>'+ arg[i]['id'] +'</td><td>'+ arg[i]['name'] +'</td><td>'+ arg[i]['age'] +'</td></tr>';
s += a;
}
// 2 找到tbody标签,将标签添加进去
$('tbody').append(s);
}
})
});
})
</script>
</body>
</html>
