close

資料來源:http://expect7.pixnet.net/blog/post/37919326

 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.js" ></script>
        <script>
         var Submit=function(){
            var URLs="recive.php";
           
            $.ajax({
                url: URLs,
                data: $('#sentToBack').serialize(),
                type:"POST",
                dataType:'text',

                success: function(msg){
                    alert(msg);
                },

                 error:function(xhr, ajaxOptions, thrownError){ 
                    alert(xhr.status); 
                    alert(thrownError); 
                 
}
            });
            
        }
        </script>
    </head>
    <body>
        <form id="sentToBack">
            <input type="text" name="Text"/> 
            <input type="button"  value="送出" onClick="Submit()"/>
        </form>
    </body>
</html>

 

ajax當中的參數:


url:指定要進行呼叫的位址。

data:傳送至Server的資料,會自動轉為query string的型式,如果是GET請求還會幫你附加到URL。可用processData選項禁止此自動轉換。物件型式則為一Key/Value pairs。這個範例程式,是使用serialize(),會把name為sentToBack的表單中的資料傳送出去,型態的部分要看type的設定,一般表單都是用POST或是GET。

type:請求方式,POST/GET。

dataType:預期Server傳回的資料類型,如果沒指定,jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。
可選的資料類型有:

xml:傳回可用jQuery處理的XML
html:傳回HTML,包含jQuery會自動幫你處理的script tags。
script:傳回可執行的JavaScript。(script不會被自動cache,除非cache設為true)
json:傳回JSON
jsonp:在URL加上?callback=?參數,並在Server端配合送回此jsonp callback。
text:傳回純文字字串。

success:請求成功時執行函式。
function (data, textStatus) {
// data 可以是 xmlDoc, jsonObj, html, text, 但還是要參考datatype

}

error:請求失敗時執行函式。
function (xhr, ajaxOptions, thrownError) {
//通常ajaxOptions或thrownError只有一個有值
}
這個很重要,因為有時候Sever寫好的程式不容易測試,可以透過這個函數把錯誤顯示出來。

其他可能比較會用的參數:

complete:請求完成時執行的函式(不論結果是success或error)。
function (XMLHttpRequest, textStatus) {
// the options for this ajax request
}

beforeSend:發送請求之前可在此修改XMLHttpRequest物件,如添加header等,你可以在此函式中return flase取消Ajax request。
function (XMLHttpRequest) {
// the options for this ajax request
}

其他更多相關的資訊:http://api.jquery.com/jQuery.ajax/

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 墨讌子 的頭像
    墨讌子

    墨雨知心

    墨讌子 發表在 痞客邦 留言(0) 人氣()