使用jQuery实现Ajax
使用jQuery实现Ajax
jQuery对Ajax操作进行了封装,在jQuery中最底层的方法时$.ajax(),第二层是load(),$.get(),$.post(),第三层是$.getScript()和$.getJSON()
load()方法:
——load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程的HTML代码并插入到DOM中,它的结构是:load(url[,data][,callback])
参数:
url:String 请求HTML页面的URL地址
data(可选):object 发送服务器的key/value数据
callback(可选):function 请求完成时的回调函数,无论请求成功或失败
(程序员只需要使用jQuery选择器为HTML片段指定目标位置,然后将要加载的文件的url作为参数传递给load()方法即可)
注意:
1.如果data有数据是post请求,没有是get请求
2.可以在url后拼加selector选择器,选取部分内容插入页面中
$('a').click(function () { var url = this.href + ' h2'; var data = {"time": new Date()}; $('#details').onload(url,data); return false; });
get方法
post方法
获取xml文件格式
$('a').click(function () { var url = this.href; var args = {"time":new Date()}; /** * url * args:JSON格式 * function:回调函数被触发,响应结果在data中 */ $.post/get(url,args,function (data) { var name = $(data).find("name").text(); var email = $(data).find("email").text(); var website = $(data).find("website").text(); $('#details').empty() .append("<h2><a href='"+email+"'>"+ name+"</a></h2>") .append("<a href='" + website +"'>" + website + "</a>") }) return false; })
获取JSON文件格式
$('a').click(function () { var url = this.href; var args = {"time":new Date()}; /** * url * args:JSON格式 * function:回调函数被触发,响应结果在data中 */ $.getJSON(url,args,function (data) { var name = data.person.name; var email = data.person.email; var website = data.person.website; $('#details').empty() .append("<h2><a href='"+email+"'>"+ name+"</a></h2>") .append("<a href='" + website +"'>" + website + "</a>") })
return false; })
$.get(url,args,function (data) { var name = data.person.name; var email = data.person.email; var website = data.person.website; $('#details').empty() .append("<h2><a href='"+email+"'>"+ name+"</a></h2>") .append("<a href='" + website +"'>" + website + "</a>") },JSON)