脚本宝典收集整理的这篇文章主要介绍了ajax在js中和jQuery中的用法实例详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

原生 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中的用法的文章就介绍到这了,更多相关ajax在js中和jQuery的用法内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的ajax在js中和jQuery中的用法实例详解全部内容，希望文章能够帮你解决ajax在js中和jQuery中的用法实例详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。