原生 JS

怎么發(fā)送一個 get 請求

• 創(chuàng)建一個 ajax 對象
  • var xhr = new XMLHttpRequest()
• 設(shè)置請求方式和請求地址[，是否異步]
  • xhr.open('get', '/ajax'[, true or fasle])
• 準(zhǔn)備接受請求體
  • xhr.onload = function () { console.log(xhr.responseText) }
  • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
• 發(fā)送請求
  • xhr.send(null)
    

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

怎么發(fā)送一個 post 請求

• 創(chuàng)建一個 ajax 對象
  • var xhr = new XMLHttpRequest()
• 設(shè)置請求方式和請求地址[，是否異步]
  • xhr.open('post', '/ajax'[, true or fasle])
• 準(zhǔn)備接受請求體
  • xhr.onload = function () { console.log(xhr.responseText) }
  • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
• 發(fā)送請求
  • xhr.send(null)

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

發(fā)送一個帶有參數(shù)的 get 請求

• var xhr = new XMLHttpRequest
• 直接在請求地址后面拼接參數(shù)，? 開始，key=value 的形式，多個參數(shù)之間以 &  分割
  • xhr.open('get', '/ajax?name=Jack&age=18')
• xhr.onload = function () { console.log( xhr.responseText ) }
• xhr.send()

發(fā)送一個帶有參數(shù)的 post 請求

var xhr = new XMLHttpRequest

不需要在請求地址后面拼接任何內(nèi)容

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

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

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

• 自己收集數(shù)據(jù) key=value
  • 自己設(shè)置請求頭
  • xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
• FormData 收集數(shù)據(jù)
  • 什么都不需要，只要使用 FormData 收集數(shù)據(jù)就可以了
  • var fd = new FormData(DOM)
  • 在發(fā)送請求的時候只要把 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 幾個參數(shù)，怎么使用

地址

• 參數(shù) key=value 或者 { name: 'Jack' }
• 成功的回調(diào)函數(shù)
• 預(yù)期后臺返回的數(shù)據(jù)類型
  • text ： 什么都不做，直接給你結(jié)果
  • json ： 必定會執(zhí)行一步 JSON.parse()

$.post 幾個參數(shù)，怎么使用

• 地址
• 參數(shù) key=value 或者 { name: 'Jack' }， 不能發(fā)送 FormData
• 成功的回調(diào)函數(shù)
• 預(yù)期后臺返回的數(shù)據(jù)類型

$.ajax 幾個參數(shù)，怎么使用

• 就是配置項 options
  • url： 請求地址
  • method/type:  請求方式
  • data： 攜帶參數(shù)
  • dataType： 后臺返回的數(shù)據(jù)類型天
  • success： 成功的回掉
  • error： 失敗的回調(diào)
  • contentType:  發(fā)送 FormData 的時候使用的
  • processData： 發(fā)送 FormData 的時候使用的

JSONP

$.ajax 怎么發(fā)送 jaonp 請求

• dataType 必須是 jsonp
• 方式必須是 get
• jsonp： 根據(jù)后臺來決定
  

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

總結(jié)

到此這篇關(guān)于ajax在js中和jQuery中的用法的文章就介紹到這了,更多相關(guān)ajax在js中和jQuery的用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論