ajax在js中和jQuery中的用法实例详解
作者:_Battle 发布时间:2024-02-26 06:12:31
目录
原生 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)
}
})
来源:https://juejin.cn/post/6998321572972855309
猜你喜欢
- 我们经常会有对图像边缘做扩展的需求.比如希望卷积后得到的矩阵大小不变希望改变图像大小,但是不改变宽高比opencv实现opencv中使用co
- 英文文档:format(value[, format_spec])Convert a value to a “formatted” repr
- [Q]怎么样查询特殊字符,如通配符%与_ [Q]如何插入单引号到数据库表中 [Q]怎样设置事务一致性 [Q]怎么样利
- 伙伴遇到一个关于excel导入数据到python中,日期变成数字而不是日期格式的问题。第一反应这个数字应该是excel里面的时间戳类似的,所
- Toast简介Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的
- 大家有没有这种感觉,一到国庆、春节这种长假,抢火车票就非常困难?各大互联网公司都推出抢票服务,只要加钱给服务费就可以增加抢到票的几率。有些火
- 目前lnmp一键安装包比较多的问题就是502 Bad Gateway,大部分情况下原因是在安装php前,脚本中某些lib包可能没有安装上,造
- 前言今天给大家写一个个打地鼠小游戏,废话不多说直接开始~开发工具Python版本: 3.6.4相关模块:pygame模块;以及一些
- 所谓的列表推导式,就是指的轻量级循环创建列表。基本使用方式# 创建一个0-10的列表a = [x for x in range(11)]pr
- 利用空闲几天把《JavaScript权威指南》安静的读了一篇。真是一本好书呀!呵呵,这句话见的太多了。好在什么地方呢?听我慢慢道来。从开始接
- Liwu_Items表,CreateTime列建立聚集索引 第一种,sqlserver2005特有的分页语法 代码如下:declare @p
- 我们用下了asp代码简单统计了下载一个文件需要的时间:<%Function DownloadTime(intFileSize
- 引言实现一个视频压缩的功能,性能优良 压缩视频 从61M 到 11M或者80M到15M视频看起来没有太大损伤缺点:耗时20s (win10,
- 每位SQL Server开发员都有自己的首选操作方法。我的方法叫做分子查询。这些是由原子查询组合起来的查询,通过它们我可以处理一个表格。将原
- 一、案例场景字段login_place,一共267725行记录,随机15条记录如下: 后续数据分析工作需要用到地理维度进行分析,所以需要把
- 本文实例讲述了Python设计模式之享元模式原理与用法。分享给大家供大家参考,具体如下:享元模式(Flyweight Pattern):运用
- SQL Server 2000 清理日志精品教程SQL Server 2000 数据库日志太大!如何清理SQL Server 2000的日志
- 一、使用matplotlib显示图import matplotlib.pyplot as plt #plt用于显示图片import matp
- 最简单的例子:a = [1,1,1,1,2,2,2,3,3,1,1,1,3]# 问:计算a中最多有几个连续的1很明显,答案是4如果用代码实现
- Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为:connection can no