<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
width: 500px;
/* height: 500px; */
min-height: 100px;
background-color: pink;
position: absolute;
left: 50%;
margin-left: -250px;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script src="ajax.js"></script>
<script>
// JQuery ajax相关API使用
$(function() {
//绑定事件
$("#btn").click(function() {
//获取图书编号
var code = $("#code").val();
ajax({
type: 'get',
url: 'book.php',
data: {code: code},
dataType: "json",
success: function(data) {
console.log(data);
if (data.flag == 0) {
$("#info").html("该图书不存在");
} else {
$("#info").html("<ul><li>书名: " + data.name + "</li><li>作者: " + data.author + "</li><li>描述: " +data.desc+ "</li></ul>");
}
}
});
})
})
</script>
</head>
<body>
<!-- 功能需求 页面输入图书编号 查询服务器端的图书信息并且解析渲染 -->
<div id="box">
<div>
图书编号: <input type="text" name="code" id="code">
<input type="button" value="查询" id="btn">
<div id="info">
</div>
</div>
</div>
</body>
</html>
025- JQuery ajax相关API使用
最新推荐文章于 2024-05-30 09:00:00 发布