JQ中的Ajax的封裝

本文轉載自查看原文 2019-05-15 00:21 2569

1.認識JQ中ajax的封裝

jQ 對於ajax的封裝有兩層實現；$.ajax 為底層封裝實現；基於 $.ajax ，分別實現了$.get 與$.post 的高層封裝實現；

2.Ajax的底層實現基本語法：

async： 布爾類型，代表是否異步，true代表異步，false同步，默認為true

cache： 是否緩存，布爾類型，true代表緩存，false代表不緩存，默認為true

complete： 當Ajax狀態碼（readyState）為4的時候所觸發的回調函數

contentType： 發送信息至服務器時內容編碼類型；(默認: "application/x-www-form-urlencoded")

data： 要求是一個字符串格式，Ajax發送時所傳遞的數據

dataType： 期待的返回值類型，可以是text，xml，json，默認為text類型

success： 當Ajax狀態碼為4且響應狀態碼為200時所觸發的回調函數

type： Ajax發送網絡請求的方式，(默認: "GET")；

url： 請求的url地址

GET請求

<body>
    <input type="button" value="點擊" id="btu">
</body>
<script>
    $('#btu').click(function(){
        //get請求
        $.ajax({
            url:'/jq_ajax_get',
            success:function(data){
                alert(data);
            }
        });
    });
</script>

POST請求：

<body>
    <input type="button" value="點擊" id="btu">
</body>
<script>
    $('#btu').click(function () {
        $.ajax({
            url: '/jq_ajax_post',
            type: 'post',
            data: 'id=1111',
            success: function (data) {
                alert(data);
            },
            // async:false,
        });
        // alert(22); //檢驗同步異步
    });
</script>

3.ajax的高層實現：

GET應用：

基本語法：$.get(url, [data], [callback], [type])

url:待載入頁面的URL地址

data:待發送 Key/value 參數。

callback:載入成功時回調函數。

type:返回內容格式，xml, html, script, json, text, _default。

案例：

<body>
    <input type="button" value="點擊" id="btu">
</body>
<script>
    $('#btu').click(function(){
        $.get('/jq_ajax_get',function(data){
            alert(data);
        },'json');
    });
</script>

POST應用：

$.post(url, [data], [callback], [type])

url:發送請求地址。

data:待發送 Key/value 參數。

callback:發送成功時回調函數。t

ype:返回內容格式，xml, html, script, json, text, _default。

案例：

<body>
    <input type="button" value="點擊" id="btu">
</body>
<script>
    $('#btu').click(function () {
        $.post('/jq_ajax_post',
            { id: '11' },
            function (data) {
                alert(data);
            });
    });
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jq ajax通用封裝封裝jq的ajax jq的ajax封裝 jq中的ajax傳參 jq中使用promise封裝ajax jq的ajax中promise的應用 jq中ajax的dataType:"json"是指什么？ javascript中Ajax的簡單封裝原生Ajax 和Jq Ajax 封裝基於jq彈窗插件