溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Ajax怎么在Jquery中使用

發(fā)布時間:2021-03-25 16:37:17 來源:億速云 閱讀:136 作者:Leah 欄目:web開發(fā)

這篇文章將為大家詳細講解有關Ajax怎么在Jquery中使用,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。

Jquery的Ajax技術(重點)

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

Ajax怎么在Jquery中使用

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”)響應亂碼問題還與原來一樣)

其中:

  •     url:代表請求的服務器端地址

  •     data:代表請求服務器端的數(shù)據(jù)(可以是key=value形式也可以是json格式)

  •     callback:表示服務器端成功響應所觸發(fā)的函數(shù)(只有正常成功返回才執(zhí)行)

  •     type:表示服務器端返回的數(shù)據(jù)類型(jquery會根據(jù)指定的類型自動類型轉(zhuǎn)換)常用的返回類型:text、json、html等

如果type為json,并且服務器端返回的就是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:請求服務器端地址

    type:請求方式,POST/GET(不寫默認get)

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

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

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

    dataType:服務器端返回的數(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 () {//響應不成功時返回的函數(shù)
        console.log('請求失敗!')
      },
      dataType:'json'//設置返回的數(shù)據(jù)類型
    })
  });
</script>

關于Ajax怎么在Jquery中使用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI