Ajax在jQuery中的应用
2013-10-23 23:07
531 查看
Ajax
Ajax是 Asynchronus JavaScript and XML 的缩写,其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。
jQuery中的load方法
load(url,[data],[callback])url为被加载的页面地址
[data] 为发送到服务器的数据
[callback] 加载成功后,返回加载页面的回调函数。
script
$("#button1").click(){
$("#divTip").load("b.html");
}
b.html中的divContent元素
$("#divTip").load("b.html.divContent");
全局函数 getJSON()
$.getJSON(url,[data],[callback])url请求地址
[data] 为发送到服务器的数据
[callback] 加载成功后,返回加载页面的回调函数。
script
$("#button1").click(){
$.getJSON("UserInfo.json",function(data){
$("#divTip").empty(); //清空标记中的内容
var strHTML="";//初始化保存内容变量
$.each(data,function(InfoIndex,Info){
strHTML+="姓名:"+Info["name"]+"<br>";
strHTML+="性别"+Info["sex"]+"<br>";
strHTML+="邮箱"+Info["email"]+"<br>";
}
$("#divTip").html(strHTML);//显示处理后的数据
}
}
UserInfo.json
[{
"name":"JACK",
"sex":"男",
"email":cc@cc.com"
},
{
"name":"Mack",
"sex":"男",
"email":mack@cc.com"
}]
全局变量 getScript()
全局变量 getScript()实现异步获取数据$("#button").click(
function(){
$.getScript("UserInfo.js")
});
UserInfo.js
var data=[
{
"name":"Jack",
"sex":"男",
"email":“jack@jack.com”
},
{
"name":"lucy",
"sex":"女",
"email":" lucy@lucy.com"
}];
var strHTML="";//初始化保存内容变量
$.each(data , function () { //遍历获取的数据
strHTML+="姓名:"+this["name"]+"<br>";
strHTML+="性别:"+this["sex"]+"<br>";
strHTML+="邮箱:"+this["emai"l]+"<br>";
})
$("#divHTML").html(strHTML); //显示处理后的数据
与所有全局变量一样,getScript() 也有一个回调函数,该回调函数在文件加载后执行,
如代码“$.getScript("UserInfo.js”,function(){ alert{ " 加载成功 " }; }); 表示在文件加载成功后,弹出对话框“加载成功”
相关文章推荐
- .net jquery ajax应用(前端)
- jQuery与Ajax的应用
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在
- jQuery 之路重走(7) jQuery中ajax的应用
- 《锋利的jQuery》要点归纳(五)jQuery与ajax的应用(下)
- jQuery实现Ajax应用加载(load/getJSON/getScript/get/post/serialize/ajax/ajaxSetup/ajaxStart/ajaxStop)
- playframework中ajax的应用例子(jQuery)
- ajax的基本应用及原理,及在jquery里ajax的应用
- jquery学习第十三番 ajax 应用
- Jquery中$.ajax()方法应用笔记
- jQuery中的ajax应用
- jQuery与ajax的应用(一)
- Ajax在JQuery中的应用(get方法练习1)
- jQuery-ajax的serializeArray()、serialize()、param()应用
- 六、jQuery与Ajax的应用
- jQuery 的Ajax应用(1)--学习篇,内附实例
- .net jquery ajax应用(后台)
- jQuery中的$.ajax()方法应用
- jQuery与Ajax的应用[转]
- 锋利的JQuery学习笔记之JQuery-Ajax的应用