幫助方法、全域Ajax事件處理器 (jQuery25)

官網連結

※幫助方法

就是serialize和 serializeArray
serialize可將form變成字串的形式
serializeArray可將form變成name、value的形式，回傳JSON物件(不是JSON字串)，

<form action="xxx/ooo" method="post">
    使用者：
    <input type="text" name="username" value="user" /><br />
    密碼：
    <input type="password" name="password" value="pass" /><br />
    
    <input type="radio" name="ra" value="r1" />
    <input type="radio" name="ra" value="r2" />
    <input type="radio" name="ra" value="r3" checked="checked" /><br />
    
    <input type="checkbox" name="ch" value="c1" checked="checked" />
    <input type="checkbox" name="ch" value="c2" checked="checked" />
    <input type="checkbox" name="ch" value="c3" /><br />
    
    <select name="se">
        <option>s1</option>
        <option selected="selected">s2</option>
        <option>s3</option>
    </select>
    <br />
    
    <input type="button" value="serialize" onclick="serialize()" /><br />
    <input type="button" value="serializeArray" onclick="serializeArray()" /><br />
</form>
    
<span id="span1"></span><br />
<span id="span2"></span>
-----
$(function(){
    $('#span1').text($("form").serialize());
    console.log($("form").serialize()); // username=user&password=pass&ra=r3&ch=c1&ch=c2&se=s2
    
    $('#span2').text($("form").serializeArray());
    console.log($("form").serializeArray()); // [Object, Object, Object, Object, Object, Object]
    
    $.each($("form").serializeArray(), function(i, f){
        console.log("name=" + f.name);
        console.log("value=" + f.value);
    });
});

因為serializeArray印出來是Object，所以可以用$.each印出來



官網連結

※全域Ajax事件處理器

目前共6種
由上往下執行，ajaxError、ajaxSuccess只會執行其中之一，global設false不會執行
.ajaxStart()：一開始就會執行
.ajaxSend()：開始發送會執行
.ajaxError()：失敗時執行
.ajaxSuccess()：成功時執行
.ajaxComplete()：完成時執行
.ajaxStop()：結束執行

var ajaxTest = function(){
    $.ajax({
        url : "xxx",
        type : "POST",
        // dataType: 'abc',
        data : $.param({ 
                    username: $('input[name="username"]').val(), 
                    password: 'p' 
                }),
        success : function(data, textStatus, jqXHR){
            console.log('data=' + data);
            console.log('textStatus=' + textStatus);
        }
    });
}
    
function setGlobalFalse(){
    $.ajaxSetup({
        global : false
    });
}
    
$(document).ajaxStart(function() {
    alert('start');
});
    
$(document).ajaxSend(function() {
    alert('send');
});
    
$(document).ajaxError(function() {
    alert('error');
});
    
$(document).ajaxSuccess(function() {
    alert('success');
});
    
$(document).ajaxComplete(function() {
    alert('complete');
});
    
$(document).ajaxStop(function() {
    alert('stop');
});
----------
<h3>${success}</h3>
<form action="xxx/ooo" method="post">
    使用者：
    <input type="text" name="username" value="user" /><br />
    密碼：
    <input type="password" name="password" value="pass" /><br />
    <input type="submit" />
</form>
    
<input onclick="ajaxTest()" type="button" value="test" />
<input onclick="setGlobalFalse()" type="button" value="globalFalse" />

※這範例是成功的，所以ajaxSuccess會跳出來；將dataType打開會失敗，所以ajaxError跳出來

※將globalFalse的按鈕按下後，都不會觸發了

※注意官網有說版本的問題，我沒有測