资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JQuery中的Ajax怎么用

这篇文章主要介绍JQuery中的Ajax怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为兴县企业提供专业的成都做网站、成都网站建设,兴县网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

JQuery对Ajax操作进行了封装,在JQuery的最底层的方法是$.ajax(),第二层是load() $.get() $.post(), 第三层是$.getScript()和$.getJSON().





Insert title here


$(function(){
	$("a").click(function(){
		var url = this.href;
		var args = {"time":new Date()};
		$("#content").load(url, args);
		return false;
	});
});



hello

load()方法是JQuery中最为简单和常用的Ajax方法,能载入远程的HTML代码并插入到DOM中。它的结构是 load(url[,data][,callback])

url (String)请求HTML页面的URL地址

data(可选)(Object)发送到服务器的key/value数据

callback(可选) (Function)请求完成时的回调函数,无论请求成功或失败

可以使用url selector





Insert title here


$(function(){
	$("a").click(function(){
		//var url = this.href;//默认全选择
		//var url = this.href + " h3";//选择h3部分
		var url = this.href + " h3 a";//选择h3中的a部分
		var args = {"time":new Date()};
		$("#details").load(url, args);
		return false;
	});
})



	
  • 百度

a.html

http://www.baidu.com

H2 Test QQ


$.get()(或$.post())方法

$.get()方法使用GET方式来进行异步请求,结构是$.get(url[,data][,callback][,type])

url (String)请求HTML页面的URL地址

data(可选)(Object)发送到服务器的key/value数据,数据位作为QueryString附加到请求的url中

callback(可选) (Function)载入成功时的回调函数(只有当reponse的返回状态是success时才调用该方法)自动将请求结果和状态传递给该方法

type(可选)(String)服务器返回内容的格式,包括xml、html、script、json、text、default

textstatus代表请求状态,包括success error notmodify timeout

$.get()  $.post()  是JQuery中的全局函数

find() 等方法都是对JQuery对象进行操作的方法





Insert title here


	$(function(){
		$("a").click(function(){
			var url = this.href;
			var args = {"time":new Date()};
			//args :JSON格式
			//function 回调函数,当相应结束时被触发。响应结果在data中
			$.post(url, args, function(data){
			//$.get(url, args, function(data){//这里使用post和get无区别
				var name = $(data).find("name").text();
				var website = $(data).find("website").text();
				var email = $(data).find("email").text();
				
				$("#details").empty().append("

"+name+"

") .append(""+website+""); }); return false; }); })
  • andy

andy.xml


Andy Budd http://www.baidu.com umgsai@126.com

下面使用json格式数据来实现上面的功能





Insert title here


	$(function(){
		$("a").click(function(){
			var url = this.href;
			var args = {"time":new Date()};
			//args :JSON格式
			//function 回调函数,当相应结束时被触发。响应结果在data中
			$.getJSON(url, args, function(data){
				var name = $(data).person.name;
				var website = $(data).person.website;
				var email = $(data).person.email
				
				$("#details").empty().append("

"+name+"

") .append(""+website+""); }); return false; }); })
  • andy

andy.json

{"person":{
"name":"umgsai",
"website":"http://www.baidu.com",
"email":"umgsai@126.com"
}
}

小结:

  1. 什么是Ajax? 不用刷新页面,但可以和服务器端进行通信的方式。使用Ajax的主要方式是XMLHttpRequest对象

  2. 使用XMLHttpRequest对象实现Ajax(了解)。现在一般使用JQuery或者其他的JS框架来获取。

  3. Ajax传输数据的三种方式

    ①XML:笨重,解析困难。但XML是通用的数据交换格式

    ②HTML:不需要解析可以直接放到文档中,若仅更新一部分区域,但传输的数据不是很方便,切HTML代码需要拼装完成。

    ③JSON:小巧,有面向对象的特征,并且提供很多第三方的Jar包把Java对象或集合转成Json字符串。是目前使用最多的方式。

  4. 使用JQuery完成Ajax操作

    ①load方法:可以用于HTML文档的元素结点,把结果直接加为对应结点的子元素。通常load方法加载的数据是HTML片段。

    var $obj = ...

    var url = ...

    var agrs = {key:value,...};

    $obj.load(url, args);

    ② $.get  $.post  $.getJSON 更加灵活。除去使用load方法的情况,大部分使用这三个方法。

    //url:Ajax请求的目标URL

    //args:传递的参数 JSON类型

    //data: Ajax响应成功后的数据,可能是XML  HTML  JSON

    $.get(url, args, function(data){

    });

    请求JSON数据

    $.get(url, args, function(data){

    }, "JSON");

    $.post(url, args, function(data){

    }, "JSON")

$.getJSON(url, args, function(data){

})

以上是“JQuery中的Ajax怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


名称栏目:JQuery中的Ajax怎么用
网站URL:http://cdkjz.cn/article/gpsssh.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220