• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ajax在js中和jQuery中的用法实例详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

原生 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的用法内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
详解JS对象遍历的顺序问题发布时间:2022-02-05
下一篇:
vue使用Google Recaptcha验证的实现示例发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap