1 使用load()方法 异步请求数据
使用load() 方法通过ajax请求加载服务器中的数据,
并把返回的数据放置在指定元素中,调用格式如下
load(url,[data],[callback])
<script type="text/javascript">
$(function(){
$(#id).bind("click",function(){
var $this=$(this);
$("ul").html("<img src='' alt=''/>").load("http://....."),
function(){
$this.attr("disabled","true");
});
})
}
);
</script>
2使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])
或$.getJSON(url,[data],[callback])
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==2)
$("ul").append("<li>" + sport["name"] + "</li>");
});
使用getScript()方法异步加载并执行js文件
使用get()方法以GET方式从服务器获取数据
使用post()方法以POST方式从服务器发送数据
使用serialize()方法序列化表单元素值
使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxStart()和ajaxStop()方法
使用ajax()方法加载服务器数据
$.ajax({
url: "http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type: "post",
success: function (data) {
$("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>");
}
});
<div id="divtest">
<div class="title">
<span class="fl">加载一段文字</span>
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul>
<li id="divload"></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function(){
$(this).html("正在请求数据...")
});
$("#divload").ajaxStop(function(){
$(this).html("数据请求完成!");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}
});
})
});
</script>
最后一个例子
<ul></ul>
<script type="text/javascript">
var stus = [{
"name":"寂寞",
"age":"32",
"sex":"male"
},{
"name":"寂寞",
"age":"32",
"sex":"male"
}];
$.each(stus,function(index,stu){
$("ul").append("<li>"+stu.name+"</li>")
})
</script>