初识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>
<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>
相关推荐
时光如瑾雨微凉 2020-07-19
ppsurcao 2020-06-14
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05