您当前的位置: 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>
<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>
$(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>
$(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>
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("sport_f.js",function() {
$this.attr("disabled", "true");
});
})
});
</script>