先来看一个例子
需求:页面输入图书编号,查询服务器端的图书信息并且解析渲染
前端代码:
<!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="./jquery.js"></script>
<script type="text/javascript">
/*
jQuery-ajax相关API基本使用
*/
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var code = document.getElementById('code').value;
$.ajax({
type: 'post',
// url: './11.php?code=' + code,
// get 和 post 请求都支持,下面这样传参,上面的方式 只适合 get,它会根据上面的 type进行判断,如果是 get,他会帮你
// 加上 ?的
url: './11.php',
data: {
code: code
},
dataType: 'json', //xml json text html script jsonp
// 形参最好使用 response
success: 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代码:
<?php
// $code = $_GET['code'];
$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' => '一个封建王朝的缩影');
// 这里的array_key_exists用来判断数组中没有对应键
if (array_key_exists($code, $books)) {
$book = $books[$code]; //这里根据参数获取一本书的信息
echo json_encode($book);
} else {
// 返回一个 json格式的字符串
echo '{"flag":0}';
}
// echo $qq;
显示效果如下:
再来看下 这个版本的前端代码:
<!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="./jquery.js"></script>
<script type="text/javascript">
/*
jQuery-ajax相关API基本使用
*/
$(function () {
$("#btn").click(function () {
var code = $("#code").val();
$.ajax({
type: 'get',
url: './11.php',
data: {
code: code
},
dataType: 'json',
success: function (data) {
if (data.flag == 0) {
$("#info").html("该图书不存在");
} else {
var tag = '<ul><li>书名:' + data.bookname + '</li><li>作者:' + data.author + '</li><li>描述:' +
data.desc + '</li></ul>';
$("#info").html(tag);
}
},
error: function (data) {
console.dir(data);
$("#info").html("服务器发生错误,请与管理员联系");
}
});
});
});
</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代码:
<?php
// $code = $_GET['code'];
$code = $_POST['code'];
// 服务端输出一个不存在的变量
echo $qq;
相比于上面而言,这个版本多了一个 错误处理的回调函数 !!!我们可以让服务端发生错误,看一下显示结果 。
如果这篇文章能够帮助到你,希望您不要吝惜点赞 ,您的支持是我继续努力的动力 !!!