需求:根据对应编号搜索对应图书
前台代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax小案例</title>
<script src="ajax.js"></script>
<script>
//需求:输入图书编号,查询对应图书信息
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var code = document.getElementById('code').value;
ajax('03.php','get','code='+code,'json',function(data){
//解析数据并渲染到页面
var box = document.getElementById('box');
if(data.flag == 0){
box.innerText = '没有该编号书籍';
}else{
console.log(data);
var tag = '<ul><li>书名:'+ data.bookname +'</li><li>'+ data.author +'</li></ul>'
box.innerHTML = tag;
}
});
}
}
</script>
</head>
<body>
请输入图书编号:<input type="text" id="code" name="code">
<input type="button" value="查询" id="btn">
<div id="box"></div>
</body>
</html>
后台代码:
<?php
$code = $_GET['code'];
$arr = array();
$arr[1] = array("bookname"=>"西游记","author"=>"吴承恩");
$arr[2] = array("bookname"=>"三国演义","author"=>"罗贯中");
$arr[3] = array("bookname"=>"水浒传","author"=>"施耐庵");
$arr[4] = array("bookname"=>"红楼梦","author"=>"曹雪芹");
if(array_key_exists($code, $arr) == 1){//用来判断数组中是否有对应键
echo json_encode($arr[$code]);
}else {
echo '{"flag":"0"}';
}
?>
运行结果:
正确:
错误: