初识Ajax(二)

1.ajax使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据设到指定的元素中。

格式:.load(url,[data],[callback])

url 加载服务器地址,data请求时发送的数据,callback请求成功后执行的回调函数

例:点击“加载”按钮时,向服务器请求加载一个指定页面的内容,加载成功后将数据显示在<div>元素中,并将加载按钮变为不可用。

HTML文件如下:

HTML 写道
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最爱吃的水果</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>

 使用load()方法如下:

写道
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {//点击按钮时发送请求
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")//加载动画
.load (fruit_part.html{
$this.attr("disabled", "true");//设置按钮不可用
});
})
});
</script>

 2.使用getJSON()方法异步加载JSON格式文件

使用getJSON()方法可以通过Ajax异步请求的方法,获取服务器中的数据,并对获取的数据进一步解析,并显示到页面。

格式:$.getJSON(url,[data],[calldata])

例:点击加载按钮,加载json文件中的数据,并遍历数组,显示到页面

HTML 写道
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("Data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");//在行后添加
});

});
})
});
</script>

3.使用getScript() 方法异步加载并执行js文件

异步请求并执行服务器中的js文件

格式:$.getScripe(url [data],[calback])

例:点击加载按钮,加载js文件,并显示到页面中

HTML 写道
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("sport_f.js",function() {
$this.attr("disabled", "true");
});
})
});
</script>

相关推荐