● 什么是Ajax?
○ 1、Ajax(Asynchronous javaScript and XML)异步的JavaScript 和XML
○ 2、Ajax不是新的编程语言,而是一种使用现有标准的新方法
○ 3、Ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
○ 4、Ajax可以是网页实现异步更新
○ 5、Ajax不需要任何浏览器插件
● jQuery load() 方法
○ load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$('.box').load('text.txt')
● $.ajax()
● ajax() 方法用于执行 AJAX(异步 HTTP)请求。
● 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
● 现阶段要记住的参数,url请求的地址,type请求方式,success成功的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn">按钮</button>
<table border="1" cellspacing="0">
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>学校</td>
<td>手机号</td>
<td>身份证号</td>
<td>操作</td>
</tr>
</table>
</body>
<script src="../common/jquery-3.4.1.min.js"></script>
<script>
$('.btn').click(function () {
$.ajax({
//请求地址
url: "http://192.168.3.218:8080/test/g?num=5",
//请求方式
type: "get",
//成功的回调函数
success: function (date) {
for (let index = 0; index < date.length; index++) {
var trjq = $('<tr></tr>')
var tdjq1 = $('<td></td>')
var tdjq2 = $('<td></td>')
var tdjq3 = $('<td></td>')
var tdjq4 = $('<td></td>')
var tdjq5 = $('<td></td>')
var tdjq6 = $('<td></td>')
var tdjq7 = $(
'<td><button btnId=' + date[index].id + '>查看详情</button></td>'
)
tdjq1.html(date[index].id)
tdjq2.html(date[index].name)
tdjq3.html(date[index].age)
tdjq4.html(date[index].school)
tdjq5.html(date[index].phone)
tdjq6.html(date[index].idCard)
trjq.append(tdjq1, tdjq2, tdjq3, tdjq4, tdjq5, tdjq6, tdjq7)
$('table').append(trjq)
}
}
})
})
$('table').on("click", 'button', function () {
console.log()
$.ajax({
url: "http://192.168.3.218:8080/test/getDetail?num=" + $(this).attr('btnid'),
type: "get",
success: function (res) {
alert(`id=${res.id},姓名=${res.name},年龄=${res.school},学校=${res.school},手机号=${res.phone},身份证号=${res.idCard}`)
for (const key in res) {
console.log(key + ":" + res[key])
}
}
})
})
</script>
</html>
● JSON
● (1) 什么是JSON?
○ JSON: JavaScript Object Notation(JavaScript 对象表示法)
○ JSON 是存储和交换文本信息的语法。类似 XML。
○ JSON 比 XML 更小、更快,更易解析。
○ JSON 是轻量级的文本数据交换格式
○ 创建JSON对象
var JSONObject= {
"name":"菜鸟教程",
"url":"www.runoob.com",
"slogan":"学的不仅是技术,更是梦想!"
};
● 属性名加引号,属性值
● JSON 属性值值可以是:数字(整数或浮点数)、字符串(在双引号中)、逻辑值(true 或 false)、数组(在中括号中)、对象(在大括号中)、null
● 创建JSON对象数组
var sites = [
{ "name":"runoob" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
];
● 访问方法sites[0].name;
● 方法 JSON.parse()
○ JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。
○ 我们可以使用 JSON.parse(字符串) 方法将数据转换为 JavaScript 对象。
● JSON.stringify()
○ JSON 通常用于与服务端交换数据。
○ 在向服务器发送数据时一般是字符串。
○ 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串