基於JQuery的Ajax請求模板:$.post(),$.getJSON(),$.get(),$.ajax()

本文將列舉常用的基於JQuery的Ajax請求模板。列舉的先後順序按照我平常使用的頻率。

1.post請求:$.post()

模板

<script>
        $.post(
            '[午參數的請求url]',
            '[傳參的json串形式]',
            function (result) {
             	//這裏寫回調函數，result爲後臺的返回值 
            }
        );
</script>

示例

<script>
    //根據賬號密碼登錄
    function loginByAccount() {
        $.post(
            '${pageContext.request.contextPath}/front/customer/loginByAccount',
                $('#frmLoginByAccount').serialize(),
            function (result) {
                //登錄提示消息
                layer.msg(result.message,{time:1000});
                if(result.status == 1){
                    //局部刷新
                    $('#navbarInfo').html(template('welcome',result.data));
                    $('#loginModal').modal('hide');
                    $('#loginMessage').html();
                }
            }
        )
    }
</script>

2.getJSON請求:$.getJSON()

模板

<script>
        $.get(
            '[無參數的請求url]',
			'[傳參的json串形式]',
            function (result) {
             	//這裏寫回調函數，result爲後臺的返回值 
            }
        );
</script>

示例

<script>
     //短信登錄-獲取短信驗證碼
    function sendVerificationCode(btn) {
        $.getJSON(
            '${pageContext.request.contextPath}/front/sms/sendVerificationCode',
            {'phone':'10086'},
            function (result) {
                        layer.msg(result.message);
                    }
            }
        );
    }
</script>

        我們可以看到，$.post()和$.getJSON()的形式一模一樣。唯一的區別在於前者發送的是post請求，對傳入的字符串長度無要求,傳入參數在地址欄不可見,傳輸較慢；後者發送的是get請求,對URL長度有限制（不同瀏覽器和不同接受服務器均有差異，以IE瀏覽器爲例，不要超過2083字符），傳入參數在地址欄可見，傳輸快。
        一般情況下，$.post()和$.getJSON()就可以滿足傳輸json串的ajax請求需要了。

3.get請求:$.get()

模板

<script>
        $.get(
            '[帶參數或者無參數的請求url]',
            function (result) {
             	//這裏寫回調函數，result爲後臺的返回值 
            }
        );
</script>

示例

<script>
       //退出登錄
    function logout(){
      $.get(
            '${pageContext.request.contextPath}/front/customer/logout',
            function (result) {
                if(result.status == 1){
                    //局部刷新
                   $('#navbarInfo').html(template('login'));
                }
            }
        );
    }
</script>

$.get() 是得到這個url指向的網址的內容， 內容可以是任意類型的數據， 通常是HTML
如果我們已經知道請求的網址返回的是一段JSON， 那麼用$.getJSON(), jQuery會幫我們把取的的JSON字符串轉換成js 對象

4.通用請求：$.ajax()

模板

<script>
	$.ajax({
	      type: "POST",      //data 傳送數據類型。
	      dataType: 'json',  // 返回數據的數據類型json
	      url: "/site/abc",  
	      cache: false,      
	      data: {tel: tel},  //傳送的數據
	      error:function(){	
	       	//數據傳輸失敗時使用
	      },
	      success: function (data) {
	     	//數據傳輸成功時的回調函數
	      }
	})
</script>

我基本不會用到這種形式。但如果需要在數據傳輸失敗時進行相關處理操作，還是需要使用這種形式。