AjaxjQ基础篇–$.ajax()方法详解及实例

1.url:

渴求为String类型的参数,(默觉稳妥前页地址)发送请求的地点。

2.type:

供给为String类型的参数,请求情势(post或get)默以为get。注意别的http请求方法,举例put和delete也足以动用,但仅部分浏览器援救。
3.timeout:
要求为Number类型的参数,设置请求超时时间(微秒)。此设置将掩盖$.ajaxSetup()方法的全局设置。

4.async:
渴求为Boolean类型的参数,默许设置为true,全部请求均为异步请求。假如急需发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户别的操作必须等待请求实现才得以试行。

5.cache:
渴求为Boolean类型的参数,默感到true(当dataType为script时,默以为false),设置为false将不会从浏览器缓存中加载请求音讯。

6.data:
要求为Object或String类型的参数,发送到服务器的多少。如若已经不是字符串,将电动转变为字符串格式。get请求中校附加在url后。幸免那种自动转变,可以查阅  processData选项。对象必须为key/value格式,比方{foo一:”bar一”,foo二:”bar2″}调换为&foo一=bar1&foo二=bar二。假若是数组,JQuery将自动为差异值对应同三个名号。举个例子{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2。

7.dataType:
须要为String类型的参数,预期服务器重回的数据类型。假若不点名,JQuery将活动根据http包mime音讯重回responseXML或responseText,并视作回调函数参数字传送递。可用的体系如下:
xml:返回XML文档,可用JQuery处理。
html:重返纯文本HTML消息;包涵的script标签会在插入DOM时进行。
script:再次回到纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注目的在于中距离请求时(不在同3个域下),全数post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP格局调用函数时,举例myurl?callback=?,JQuery将自动替换后叁个“?”为不易的函数名,以推行回调函数。
text:再次回到纯文本字符串。

8.beforeSend:
务求为Function类型的参数,发送请求前能够修改XMLHttpRequest对象的函数,比方加多自定义HTTP头。在beforeSend中若是回到false能够收回此番ajax请求。XMLHttpRequest对象是无可比拟的参数。
function(XMLHttpRequest){
this;
//调用本次ajax请求时传递的options参数
}
9.complete:
渴求为Function类型的参数,请求落成后调用的回调函数(请求成功或失利时均调用)。参数:XMLHttpRequest对象和3个叙述成功请求类型的字符串。
function(XMLHttpRequest,
textStatus){
this;
//调用此次ajax请求时传递的options参数
}

10.success

须求为Function类型的参数,请求成功后调用的回调函数,有七个参数。
(1)由服务器重临,并依靠dataType参数实行拍卖后的数码。
(2)描述状态的字符串。
function(data,
textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this;
//调用本次ajax请求时传递的options参数
}

11.error:
务求为Function类型的参数,请求退步时被调用的函数。该函数有三个参数,即XMLHttpRequest对象、错误音信、捕获的荒谬对象(可选)。ajax事件函数如下:
function(XMLHttpRequest,
textStatus, errorThrown){
//平常状态下textStatus和errorThrown唯有中间一个涵盖音信
this;
//调用此番ajax请求时传递的options参数
}

12.contentType:
渴求为String类型的参数,当发送音信至服务器时,内容编码类型默以为”application/x-www-form-urlencoded”。该暗中认可值适合大好多使用场面。

13.dataFilter:
务求为Function类型的参数,给Ajax重返的本来面目数据开始展览预管理的函数。提供data和type四个参数。data是Ajax重返的原本数据,type是调用jQuery.ajax时提供的dataType参数。函数再次来到的值将由jQuery进一步管理。
function(data,
type){
//再次回到管理后的数量
return data;
}

14.global:
务求为Boolean类型的参数,默以为true。表示是不是接触全局ajax事件。设置为false将不会接触全局ajax事件,ajaxStart或ajaxStop可用于调控各个ajax事件。

15.ifModified:
渴求为Boolean类型的参数,默以为false。仅在服务器数据变动时收获新数据。服务器数据变动决断的依据是Last-Modified头新闻。暗许值是false,即忽略头消息。

16.jsonp:
渴求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来代表在”callback=?”那种GET或POST请求中U奥迪Q5L参数里的”callback”部分,举个例子{jsonp:’onJsonPLoad’}会产生将”onJsonPLoad=?”传给服务器。

17.username:
渴求为String类型的参数,用于响应HTTP访问认证请求的用户名。

18.password:
务求为String类型的参数,用于响应HTTP访问认证请求的密码。

19.processData:
务求为Boolean类型的参数,默感觉true。暗许情状下,发送的多寡将被转移为目标(从技艺角度来讲不用字符串)以同盟暗中认可内容类型”application/x-www-form-urlencoded”。假若要发送DOM树新闻或许别的不期待调换的消息,请设置为false。

20.scriptCharset:
务求为String类型的参数,只有当呼吁时dataType为”jsonp”大概”script”,并且type是GET时才会用于强制修改字符集(charset)。平日在地头和远程的内容编码区别时使用。

 

案例代码:

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty(); //清空resText里面的所有内容 var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

例:当点击a标签的时候显得相应的上面内容, 通过ajax实现。

<script type="text/javascript">
jQuery('.yd_content').load('yuding_tab0.html');
jQuery.ajax({
  url:"yuding_tab0.html",
  type:'get',
  data:{},
  dataType:"html",
  success: function(data){
   jQuery('.yd_content').html(data);
   },
  error: function(){
   alert('error');
   }
});
<script>

<script type="text/javascript">
jQuery('.jiudian_content .tab li').bind('click',
 function(){
 var _index=jQuery(this).index();
  jQuery.ajax({
    url:"yuding_tab"+_index+".html",
    type:'get',
    data:{},
    dataType:"html",
    success: function(data){
    jQuery('.yd_content').html(data);
    yuding();
    },
    error: function(){
    alert('error');
    }
    });
 })

</script>

 

相关文章