ajax在js中和jQuery中的實例用法

本篇內容主要講解“ajax在js中和jQuery中的實例用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ajax在js中和jQuery中的實例用法”吧!

目錄

• 原生 JS
  

• 怎么發送一個 get 請求

• 怎么發送一個 post 請求

• 發送一個帶有參數的 get 請求

• 發送一個帶有參數的 post 請求

• jQuery
  

• $.get 幾個參數，怎么使用

• $.post 幾個參數，怎么使用

• $.ajax 幾個參數，怎么使用

• JSONP
  

• $.ajax 怎么發送 jaonp 請求

  
  

原生 JS

怎么發送一個 get 請求

• 創建一個 ajax 對象

• var xhr = new XMLHttpRequest()

• 設置請求方式和請求地址[，是否異步]

• xhr.open('get', '/ajax'[, true or fasle])

• 準備接受請求體

• xhr.onload = function () { console.log(xhr.responseText) }

• xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }

• 發送請求

• xhr.send(null)
  

var xhr = new XMLHttpRequest()
xhr.open('get', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

怎么發送一個 post 請求

• 創建一個 ajax 對象

• var xhr = new XMLHttpRequest()

• 設置請求方式和請求地址[，是否異步]

• xhr.open('post', '/ajax'[, true or fasle])

• 準備接受請求體

• xhr.onload = function () { console.log(xhr.responseText) }

• xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }

• 發送請求

• xhr.send(null)

var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

發送一個帶有參數的 get 請求

• var xhr = new XMLHttpRequest

• 直接在請求地址后面拼接參數，? 開始，key=value 的形式，多個參數之間以 &  分割

• xhr.open('get', '/ajax?name=Jack&age=18')

• xhr.onload = function () { console.log( xhr.responseText ) }

• xhr.send()

發送一個帶有參數的 post 請求

var xhr = new XMLHttpRequest

不需要在請求地址后面拼接任何內容

• xhr.open('post', '/ajax')

xhr.onload = function () { console.log( xhr.responseText ) }

post 方式攜帶參數是直接寫在 xhr.send() 后面的 () 里面

• 自己收集數據 key=value

• 自己設置請求頭

• xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')

• FormData 收集數據

• 什么都不需要，只要使用 FormData 收集數據就可以了

• var fd = new FormData(DOM)

• 在發送請求的時候只要把 fd 帶過去就行了

var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
xhr.send('key=value&key=value')

var fd = new FormData(document.querySelector('form'))
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(fd)

jQuery

$.get 幾個參數，怎么使用

地址

• 參數 key=value 或者 { name: 'Jack' }

• 成功的回調函數

• 預期后臺返回的數據類型

• text ： 什么都不做，直接給你結果

• json ： 必定會執行一步 JSON.parse()

$.post 幾個參數，怎么使用

• 地址

• 參數 key=value 或者 { name: 'Jack' }， 不能發送 FormData

• 成功的回調函數

• 預期后臺返回的數據類型

$.ajax 幾個參數，怎么使用

• 就是配置項 options

• url： 請求地址

• method/type:  請求方式

• data： 攜帶參數

• dataType： 后臺返回的數據類型天

• success： 成功的回掉

• error： 失敗的回調

• contentType:  發送 FormData 的時候使用的

• processData： 發送 FormData 的時候使用的

JSONP

$.ajax 怎么發送 jaonp 請求

• dataType 必須是 jsonp

• 方式必須是 get

• jsonp： 根據后臺來決定
  

$.ajax({
  url: '/jsonp',
  data: {},
  dataType: 'jsonp',
  jsonp: 'callback',
  success (res) {
    console.log(res)
  }
})

到此，相信大家對“ajax在js中和jQuery中的實例用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！