首页 > 代码库 > jQuery 中 ajax 请求数据应用的一个小demo
jQuery 中 ajax 请求数据应用的一个小demo
举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ...
ajax01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ajax小例子 </title>
</head>
<body>
<!-- 获取ajax数据的触发按钮 -->
<input type="button" value="http://www.mamicode.com/获取数据" class="btn">
<!-- 让 ajax 内容加载到 news 这个 div 中 -->
<div class="news">
<img src="http://www.mamicode.com/img/loading.gif" class="load" style="display:none;">
</div><!--news-->
</body>
</html>
<script src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
//在整个文档中指定ajax开始与结束加载图片的显示与隐藏
$(document).ajaxStart(function(){
//数据还未加载完成的时候 load 图片展示
$(‘.load‘).show();
}).ajaxStop(function(){
//数据加载完成的时候 load 图片消失
$(‘.load‘).hide();
})
//按钮点击的时候那么触发ajax
$(‘.btn‘).click(function(){
$.ajax({
//要获取到的ajax的php文件,记得要在后面加上随机数清除缓存
url:‘ajax01.php?t=‘+ Math.random(),
//类型使用get方式，这个要与程序员约定
type:‘GET‘,
//设置一个网络超时时间，如果一旦过了这个时间还未请求成功的话，那么就在 error 这个属性上设置错误报告
timeout:5000,
//成功的话执行一段函数来进行功能实现
success:function(data){
//data是返回来的数据,数据类型为字符串型,那么要经过eval方法来进行转换成对象
var result = eval(data);
//使用 for in 语句来进行遍历
for(var i in result){
//得到数据插入到要输出的元素中
var child = $(‘<div class="child"><h3>‘+result[i].title+‘</h3><p>‘+result[i].content+‘</p></div>‘);
//再把元素插入到new这个盒子里面
$(‘.news‘).append(child);
}
}
//如果发生错误的错误报告
error:function( XMLHttpRequest, textStatus, errorThrown ){
//如果网络超时了那么执行提示
if (textStatus == ‘timeout‘) {
alert(‘网络超时，请刷新！‘);
}
}
});
});
});
</script>
ajax01.php
<?php
//睡眠1秒是为了测试是否会执行load图片的显示
sleep(1);
//输出json格式的数据
echo ‘[{"title":"第一现场","content":"我是内容一"},
{"title":"第二现场","content":"我是内容二"},
{"title":"第三现场","content":"我是内容三"}]‘;
?>