天天看點

jquery快速入門(完結)請求ajax

$.ajax({

    async: true,

    contentType: ‘application/json’,

    dataType: ‘json’,

    error: function(){

    請求出現錯誤時,執行的函數

    },

    success: function(data){

    //data就是responseText,是jq處理後的資料,可以直接使用

    },

    url: ‘’,

    type:‘get’

})

json結構參數說明

1 async: 是一個bool類型的值,預設true表示異步請求可以不寫,xmlHttp.open(get,url,true)第三個參數一樣的意思

2 contentType: 一個字元串表示從浏覽器發送伺服器的參數的類型,可以不寫,例如表示請求的參數是json格式,可以寫application/json

3 data: 可以是字元串,數組,json,表示請求的參數和參數值,常用的是json格式的資料

4 dataType: 表示期望從伺服器傳回的資料格式,可選:xml,html,text,json當我們使用$.ajax()發送請求時,會把該選項的值發送給伺服器,那我們的servlet能夠讀取到dataType的值 就指定浏覽器需要的是什麼資料,伺服器就可以發回需要的資料格式

5 error: 一個函數,當請求發生錯誤時,執行的函數

error: function(){}

6 success: 一個函數,請求成功,從伺服器端傳回資料,執行這個函數

XMLHttpRequest對象,當readyState===4 && status === 200 的時候

7 url: 請求的位址

8 type: 請求方式 get,post,不用區分大小寫,預設get

主要使用的是 url data dataType success

  • $.post(URL,data,function(data,status,xhr),dataType)
  1. URL 必需。規定将請求發送到哪個 URL。
  2. data 可選。規定連同請求發送到伺服器的資料。
  3. function(data,status,xhr) 可選。規定當請求成功時運作的函數。

    額外的參數:

    data - 包含來自請求的結果資料

    status - 包含請求的狀态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)

    xhr - 包含 XMLHttpRequest 對象

  4. dataType 可選。規定預期的伺服器響應的資料類型。

    預設地,jQuery 會智能判斷。

    可能的類型:

    “xml” - 一個 XML 文檔

    “html” - HTML 作為純文字

    “text” - 純文字字元串

    “script” - 以 JavaScript 運作響應,并以純文字傳回

    “json” - 以 JSON 運作響應,并以 JavaScript 對象傳回

    “jsonp” - 使用 JSONP 加載一個 JSON 塊,将添加一個 “?callback=?” 到 URL 來規定回調

例子

$.post(“www.blala.com”,{key:val},function(result){

         console.log(result)

},“json”);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(function(){
				$.ajax({
					url:'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js',
					success: function(data){
						console.log(data)
						// 檢視data中的資料結構
						// 如果我們請求回來的内容要更新到頁面上的話
						// 假設data是{ v: '123'}
						// 我們可以$('div').text(data.v)即可
					}
				})
			})
		</script>
	</body>
</html>

           

繼續閱讀