零JQ筆記 | ajax

AJAX

callback返回三个参数，在load()方法中，只要请求完成，无法是否成功，callback即会被触发

$('#resText').load('test.html .para', function (responseText, textStatus, XMLHttpRequest) {
  console.log(responseText); //请求返回的内容
  console.log(textStatus); //请求状态：success，error
  console.log(XMLHttpRequest); //XMLHttpRequest对象
});

$.get()/$.post()
$.get(url ,data[,type])

$.get(url, 发送到服务器的key/v, 回调，服务器返回格式xml/html/script/json/text/_default)

发送到get1.php,发送的内容为：username/content/，要求服务器返回html格式；

$.get('get1.php', {
  username: $('#username').val(),
  content: $('#content').val()
}, function (data, textStatus) {
  $('#resText').html(data); // 把返回的数据添加到页面上
}
);

function (data, textStatus)： data：返回的内容：xml/json/html等； testStatus: 请求状态：success/error/notmodified/timeout；而且只有当数据成功返回success反才调用，注意与load()不一样；

data返回的数据内容如

返回内容处理

html 可直接输出$(obj).html()

XML

XML文档可使用常用的attr()/find()/filter()等处理

function (data, textStatus) {
  var username = $(data).find('comment').attr('username');
  var content = $(data).find('comment content').text();
  var txtHtml = '<div class=\'comment\'><h6>' + username + ':</h6><p class=\'para\'>' + content + '</p></div>';
  $('#resText').html(txtHtml); // 把返回的数据添加到页面上
}

</td>

</tr> 
<tr> 
 <td>json</td> 
 <td>json格式简洁，易读，对返回处理后输出html

function (data, textStatus) {
  var username = data.username;
  var content = data.content;
  var txtHtml = '<div class=\'comment\'><h6>' + username + ':</h6><p class=\'para\'>' + content + '</p></div>';
  $('#resText').html(txtHtml); // 把返回的数据添加到页面上
},
'json'); //要求服务器返回json格式

</td>

</tr>

</tbody>
</table>

好处与利弊：html片段最简单；json数据重用、性能、大小、较好; xml远程应用程序未知时较好，适用于任何语言；

$.getScript('test.js')
当然，也有回调：

$.getScript('test.js',function(){
    $('#go').click(function(){
    .....
})
})

$.getJSON('test.json')
当然，也有回调：

$.getJSON('test.json',function(data){
   //data返回数据
})
})

通过$.getJSON得到的数据data，可使用$.each()来遍历[对象和数组]

$.each(data, function (i, elem) {
console.log(i); //i表示索引，elem表示值
console.log(elem['username']);
})
通过JSONP加载其它网站数据；跨域首选

$.getJSON('http://api...../',function(data){
   $.each(data[obj],function(i,elem){
        .....
        //i可作为判断条件，退出each循环，return false;
    })
})

底层$.ajax(options)方法

<style>

.ajax-tb-1 { border-collapse: collapse }
.ajax-tb-2{border-collapse: collapse}
.ajax-tb-2 td{border:1px solid #ddd;padding:5px 10px;line-height: 2;}
.ajax-tb-2 tr>td:nth-of-type(2){white-space: nowrap; }
.ajax-tb-1 td, .ajax-tb-1 th { border: 1px solid #ddd; padding: 5px 10px; line-height: 2; }

</style>

該方法只有一個參數，所有包含在$.ajav()裏,參數以key/value形式，所有參數除url外都是可選

參數名	類型	說明
url	string	默認，發送，請求地址
type	string	post/get，默認get，注意put/delete部分瀏覽器不支持
data	obj or string	發送到服務器的數據，如非字符串，則自動轉字符串形式 <br/>請求獎附加在url後，防止自動轉可查看processData選項，對象必須為key/value格式；<br/>例如 {fool:'bar1',foo2:'bar2'} ==>>&foo1=bar1&foo2=bar2 <br/>如果是數組，轉為不同值對應同一個名稱。 {foo:['bar1','bar2']}==>>&foo=bar1&foo=bar2
dataType	string	預期服務器返回類型，不指定：自動按http包mime信息返回responseXML或responseText，並作為callback參數傳遞；可用類型：<br/>xml:返xml文檔，可用jq處理 <br/>html：純html信息，包含的script標籤會在插入dom時執行<br/>script:純js代碼，不自動緩存結果，除非設置cache，注意：遠程請求時所有跨域請求都轉為get請求 <br/>json:返回JSON數據；<br/>jsonp:使用JSONP形式調用函數時，如：myurl?callback=?,jq將自動替換後一個？為正確函數名 <br/>text:純txt字符串
beforeSend	Function	發送前可修改XMLHttpRequst對象函數，如：添加算定義HTTP頭，在beforeSend中返回false可取消本次ajax請求，XMLHttpRequest對象是惟一請求；<br/> function(XMLHttpRequest){ this //調用本次ajax請求傳傳遞的options參數 }
complete	Function	請求完成後回調，成功失敗都可調用；<br/>參數：XMLHttpRequest對像和一個描述成功請求類型的string， function(XMLHttpRequest,textStatus){ this //調用本次ajax請求傳傳遞的options參數 }
success	Function	請求成功後callback <br/> 1).由服務器返回，按給的dataType參數進行處理後數據 ; <br/>2).描述狀態string; <br/> function(data,textStatus){ data; //可能是xmlDoc,jsonObj,html,text等等， this; //調用本次ajax請求傳傳遞的options參數 }
error	Function	請求失敗時調用，3參數: function(XMLHttpRequest ,textStatus,errorThrown){ //通常情況下textStatus和errorThown只有其中一個包含信息 this //調用本次ajax請求傳傳遞的options參數 }
global	Boolean	默認true，表示是否觸發全局ajax事件，設置false將不觸發，AjaxStart或AjaxStop可用於控制各種Ajax事件；

代替$.getScript()

$(function () {
    $('send').click(function () {
        $.ajax({
            type:'GET',
            url:'test.js',
            dataType:'script'
        })
    })
})

代替$.getJSON()

$.ajax({
    type:'GET',
    url:'test.json',
    dataType:'json',
    success: function (data) {
        var html=''
        $.each(data, function (index,elems) {
            html +=index 
            +':' 
            +elems['username'] 
            +':' 
            +elems['content']
        })
        $('body').html(html)
    }
})

test.json

[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]

1、serialize()方法，表單序列化,所有元素必須設置name，使用name來獲取；

<form action="" id="f2">
    <p>user:<input type="text" name="user" id=""/></p>
    <p>password:<input type="password" name="pws" id=""/></p>
    <input type="checkbox" name="ck" id=""/>
    <input type="checkbox" name="ck2" id=""/>
    <input type="radio" name="rrr" id=""/>
    <input type="radio" name="rrr" id=""/>
    <input type="radio" name="rrr" id=""/>
    <p><input type="button" id="send2" value="提交"/></p>
</form>

$('#send2').click(function () {
    console.log($('#f2').serialize());
    console.log($('#f2').serializeArray()); //若使用serializeArray()輸出對像如下圖
})

輸出：user=elmok&pws=elmokpws&ck2=on&rrr=on

輸出對象：

所以可使用$.each()

var fdata = $('#f2').serializeArray(),
$.each(fdata ,function(i,elems){
    $('body').append(fdata.value + '')
})

例子：

<form id="form1" action="#">
    <p>评论:</p>
    <p>姓名: <input type="text" name="username" id="username" /></p>
    <p>内容: <textarea name="content" id="content"  rows="2" cols="20"></textarea></p>
    <p><input type="button" id="send" value="提交"/></p>
</form>
<div id="resText"></div>

為取得姓名和內容，必須將字段一個個添加到data參數中

$('#send').click(function () {
    $.get('get1.php',{
        username:$('#username').val(),
        content:$('#content').val()
    }, function (data, textStatus) {
        $('#resText').html(data)  //返回頁面
    })
})

少量可以，多則使用serialize()方法

$('#send').click(function () {
    $.get('get1.php',$('#form1').serialize(), function (data, textStatus) {
        $('#resText').html(data)
    })
})

需要注意：$.get()方法中，data參數不僅可使用映射方式：

{
username:$('#username').val(),
content:$('#content').val()
}

也可使用字符串[中文問題]方式：注意，字符串無{}號

$('#send').click(function () {
    $.get('get1.php',
 "username="+encodeURIComponent($('#username').val())+"&content="+encodeURIComponent($('#content').val())     
    , function (data, textStatus) {
        $('#resText').html(data)
    })
})

3、$.param()方法
serialize()方法核心，對一個arr或obj按照key/value進行序列化

var obj = {a:1,b:2,c:3}
var k = $.param(obj)
//輸出：a=1&b=2&c=3

jq中的ajax全局事件
加載中loading....提示，定義好

loading......

$("#loading").ajaxStart(function(){
  $(this).show();
});
$("#loading").ajaxStop(function(){
  $(this).hide();
});

其他地方使用，仍有效，因為是全局；

另外幾個方法

ajaxComplete(fn..):請求完成時執行；

ajaxError(fn..):發生錯誤時執行，捕捉到錯誤可作為最後一個參數傳遞；

ajaxSend(fn..):請求發送前執行；

ajaxSuccess(fn...):請求成功時執行；

1、jq1.5之前，如不想某個ajax請求受全局方法影響

$.ajax({
    url:'...',
    global:false
})

1、jq1.5之後，如不想某個ajax請求受全局方法影響，則在每次發送請求之前設置

$.ajaxPrefilter(function (options) {
    options.global = true;
})

零JQ筆記 | ajax

最新文章

最近回复

分类

归档

其它