您的位置：首页 > Web前端 > JQuery

jQuery 中 ajax 请求数据应用的一个小demo

2014-08-04 09:36 429 查看

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ...

ajax01.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title> ajax小例子 </title>

</head>

<body>



<input type="button" value="获取数据" class="btn">



<div class="news">

<img src="img/loading.gif" class="load" style="display:none;">

</div>

</body>

</html>

<script src="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":"我是内容三"}]';

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航