ajax实现与后端数据传输的基本案例
基于jquery封装ajax的简单实例
ajax基本参数的实现
<body>
<!-- 用户名：<input type="text" name="" id="username">
</br>
密码：<input type="text" name="" id="password">
<input type="submit" name="" id="btn" value="提交"> -->
<div id="container">
<div>
图书编码：<input type="text" name="code" id="code">
<input type="button" value="查询" id="btn"><br>
<span id="info"></span>
</div>
</div>
<script src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function(){
var code = $('#code').val();
$.ajax({
type:'get',
url:'./22.php',
data:{code:code},
dataTape:'json',
success:function(data){
var data = JSON.parse(data);
//解析后端传回来的json数据变成数组
var info = $('#info');
console.log(data.bookname)
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);
}
}
})
})
})
</script>
</body>
2、后台PHP的代码
<?php
$code = $_GET['code'];
//接受来自前端的数据
//模拟数据
$books = array();
$books["sgyy"] = array("bookname"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代");
$books["xyj"] = array("bookname"=>"西游记","author"=>"罗贯中","desc"=>"该小说以“唐僧取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘了明代社会现实。");
$books["shz"] = array("bookname"=>"水浒传","author"=>"罗贯中","desc"=>"在梁山泊聚集起来自江湖上的许多英雄好汉。");
$books["hlm"] = array("bookname"=>"红楼梦","author"=>"罗贯中","desc"=>"描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美");
//判断接收的数据是否存在
if (array_key_exists($code,$books) == 1) {
$book = $books[$code];
//将数组类型转换成json格式的数据传输
echo json_encode($book);
}else{
echo '{"flag":0}';
}
// echo $;
?>
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
