Jquery的Ajax技術(shù)使用方法

更新時間：2019年01月21日 11:48:45 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于Jquery的Ajax技術(shù)使用方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

Jquery的Ajax技術(shù)（重點）

jquery是一個優(yōu)秀的js框架，自然對js原生的ajax進行了封裝，封裝后的ajax的操作方法更簡潔，功能更強大，與ajax操作相關(guān)的jquery方法有如下幾種，但開發(fā)中經(jīng)常使用的有三種：

1）$.get(url, [data], [callback], [type])

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

區(qū)別：get有字節(jié)碼亂碼問題，post無字節(jié)碼亂碼問題（獲取請求頁面數(shù)據(jù)到后臺，后臺response.setContextType(“text/html;charset=UTF-8”)響應(yīng)亂碼問題還與原來一樣）

其中：

url：代表請求的服務(wù)器端地址
data：代表請求服務(wù)器端的數(shù)據(jù)（可以是key=value形式也可以是json格式）
callback：表示服務(wù)器端成功響應(yīng)所觸發(fā)的函數(shù)（只有正常成功返回才執(zhí)行）
type：表示服務(wù)器端返回的數(shù)據(jù)類型（jquery會根據(jù)指定的類型自動類型轉(zhuǎn)換）常用的返回類型：text、json、html等

如果type為json，并且服務(wù)器端返回的就是json格式字符串jq內(nèi)部會幫我們自動轉(zhuǎn)化，在回調(diào)函數(shù)中獲取的實參就是轉(zhuǎn)化完成的js對象直接使用即可。

參數(shù)的順序可更換的，但是如果把data放在后面會出現(xiàn)無法傳遞數(shù)據(jù)的問題，所以不要擅自更換嚴格按照jq文檔中的順序進行使用。

function get(){
   $.get(
     "/web22-ajax/ajaxServlet2",//url
     {"name":"muzidigbig","age":22},//請求參數(shù),json的數(shù)據(jù)格式
     function(data){//請求成功后返回過來的參數(shù)
       alert(data.name+data.age);
     },
     "json"
   );
  };
//java只能是java代碼，前端頁面的代碼只能轉(zhuǎn)換成json對象
response.getWriter().write("{\"name\":\"muzi\",\"age\":22}");

3）$.ajax( { option1:value1,option2:value2... } ); （重要）

常用的option有如下：

async：是否異步，默認是true代表異步

url：請求服務(wù)器端地址

type：請求方式，POST/GET（不寫默認get）

data：發(fā)送到服務(wù)器的參數(shù)，建議使用json格式

success：成功響應(yīng)執(zhí)行的函數(shù)，對應(yīng)的類型是function類型，請求成功后獲得的值會自動封裝在這個函數(shù)的第一個參數(shù)中

error:失敗響應(yīng)執(zhí)行的函數(shù)，對應(yīng)的類型是function類型

dataType：服務(wù)器端返回的數(shù)據(jù)類型，常用text和json

beforeSend:function (argument) {},// 在發(fā)送請求之前調(diào)用,可以做一些驗證之類的處理如果返回false可以取消本次ajax請求。

<body>
<button>發(fā)送請求</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
  $('button').click(function () {
    $.ajax({
      async:true,
      url:"向后臺地址發(fā)送請求",
      type:'post',//請求的方式
      data:{'name':'muzidigbig','age':'20'},//請求的數(shù)據(jù)
      success:function (backdata) {//請求成功后返回的數(shù)據(jù)會封裝在回調(diào)函數(shù)的第一個參數(shù)中
        //通過backdata來獲取所需要的數(shù)據(jù)
        alert(backdata.name+backdata.age);
      },
      error:function () {//響應(yīng)不成功時返回的函數(shù)
        console.log('請求失?。?)
      },
      dataType:'json'//設(shè)置返回的數(shù)據(jù)類型
    })
  });
</script>

若有不足請多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章: