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

jquery学习笔记 ajaxStart ajaxStop

2013-04-02 17:59 429 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>



<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script>

$(function(){

$('#send').click(function() {

$.ajax({

type: "GET",

url: "test.js",

dataType: "script"

});

});

//共用这2个全局的ajax事件

$("#loading").ajaxStart(function(){

$(this).show();

});

$("#loading").ajaxStop(function(){

$(this).hide();

}); //ajaxStart ajaxStop 好处：在请求的过程中阻止用户操作，比如可以在ajax请求的过程中进行一些遮罩，

})

</script>

</head>

<body>

<div id="loading">加载中...</div>

<br/>

<p>

<input type="button" id="send" value="加载"/>

</p>

<div class="comment">已有评论：</div>

<div id="resText" >

</div>

</body>

</html>

test.js

var comments = [

{

"username": "张三",

"content": "沙发."

},

{

"username": "李四",

"content": "板凳."

},

{

"username": "王五",

"content": "地板."

}

];

var html = '';

$.each( comments , function(commentIndex, comment) {

html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';

})

$('#resText').html(html);

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

标签：

相关文章推荐

新的分享

章节导航