- 先将ajax进行初步封装:
js代码如下:ajax.js
function ajax(url,type,param,dataType,callback){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if(type == 'get'){
url += "?" + param;
}
xhr.open(type,url,true);
var data = null;
if(type == 'post'){
data = param;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(dataType == 'json'){
data = JSON.parse(data);
}
callback(data);
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container{
width: 360px;
min-height: 100px;
background-color: lightgreen;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
<script type="text/javascript" src="./ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var code = document.getElementById('code').value;
ajax('./11.php','get','code='+code,'json',function(data){
var info = document.getElementById('info');
if(data.flag == 0){
info.innerHTML = '没有这本书';
}else{
var tag = '<ul><li>书名:'+data.bookname+'</li><li>作者:'+data.author+'</li><li>描述:'+data.desc+'</li></ul>';
info.innerHTML = tag;
}
});
}
}
</script>
</head>
<body>
<div id="container">
<div>
图书编码:<input type="text" name="code" id="code">
<input type="button" value="查询" id="btn">
</div>
<div id="info"></div>
</div>
</body>
</html>
- php代码如下:(数据是自己在后台添加的)11.php
<?php
$code = $_POST['code'];
$books = array();
$books['sgyy'] = array('bookname'=>'三国演义','author'=>'罗贯中','desc'=>'一个杀伐纷争的年代');
$books['shz'] = array('bookname'=>'水浒传','author'=>'施耐庵','desc'=>'108条好汉的故事');
$books['xyj'] = array('bookname'=>'西游记','author'=>'吴承恩','desc'=>'佛教与道教的斗争');
$books['hlm'] = array('bookname'=>'红楼梦','author'=>'曹雪芹','desc'=>'一个封建王朝的缩影');
if(array_key_exists($code,$books) == 1){
$book = $books[$code];
echo json_encode($book);
}else{
echo '{"flag":0}';
}
?>
- 效果如图所示