JQuery中的Ajax怎么用

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

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

hello

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

url （String）请求HTML页面的URL地址

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

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

可以使用url selector

        
                
百度
        
        

a.html

http://www.baidu.com
H2 TestQQ

$.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对象进行操作的方法

        
                
andy
        
        

andy.xml

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

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

        
                
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怎么用"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！