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
猜你喜欢
- 本文实例讲述了Python3爬虫学习之MySQL数据库存储爬取的信息。分享给大家供大家参考,具体如下:数据库存储爬取的信息(MySQL)爬取
- 今天在网上看到type的一段代码 ,然后查了一下文档,才知道type还有三个参数的用法。http://docs.python.org/2/l
- 前言:事务(Transaction)是一组SQL组成的执行单元(Unit),是数据库并发控制和恢复回滚的基本单位。一个事务中可能包含多个SQ
- 字典d = {key1 : value1, key2 : value2, key3 : value3 }键必须是唯一的,但值则不必。值可以取
- 在纯静态网站里,有时候会动态更新某个区域往会选择 Pjax(swup、barba.js)去处理,他们都是使用 ajax 和 pushStat
- vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。GitHub地址:https:/
- 异常的传递性在 Python 中,异常的传递性指的是,当一个异常没有被处理时,它会沿着调用栈向上抛出,直到被处理或者导致程序崩溃。具体来说,
- 有时在项目中会遇到通过在页面中采用iframe的方式include其它页面,这时就会考虑不要因出现滚动条而影响页面效果,但include页面
- cron是什么cron的意思就是:计划任务,说白了就是定时任务。我和系统约个时间,你在几点几分几秒或者每隔几分钟跑一个任务(job),就那么
- 前言:本文研究的主要是Python实现pig Latin小游戏的简单代码,具体介绍如下。Pig Latin是一个语言游戏。步骤:1.让用户输
- subprocess官方中文文档介绍参考文档,我的直观感受和实际用法是:subprocess可以开启一个子进程来运行cmd命令。那就意味着可
- 一、报错error connecting to master 'x@x.x.x.x:x' - retry-time: 60&
- 本文实例讲述了PHP封装cURL工具类。分享给大家供大家参考,具体如下:CurlUtils工具类:<?php/** * cURL请求工
- 通过使用bootstrap框架,并配合Django自带的Paginator分页组件即可实现简单的分页效果。1.创建MyWeb项目python
- 检测文件夹,拷贝有更新的文件到对应目录 2016.5.19亲测可用,若有借鉴请修改下文件路径;学习python小一个月后写的这个功能,属于初
- 本文实例讲述了nodejs简单实现TCP服务器端和客户端的聊天功能。分享给大家供大家参考,具体如下:服务器端var net = requir
- 在程序中,变量就是一个名称,让我们更加方便记忆。cars = 100 space_in_a_car = 4.0 drivers = 30 p
- 本文实例讲述了Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息。分享给大家供大家参考,具体如下:说明:此代码用于接
- 最近随着狂风计划的席卷,我也终于开始橱窗产品位列表展示的编码工作,这只是一个改进项目,因此有原代码可供参考。但是当我打开原代码模板的时候便愣
- Web 设计离不开调色板,现成的调色板多不胜数,不管是 Windows 标准色板,还是 Web 标准色板,还是 Pantone 色板,它们虽