Ajax，FormData

Ajax 的实现步骤：

1. 创建ajax对象：

new XMLHttpRequest();

2. 告诉Ajax 对象要向哪里发送请求，以什么方式

open 函数的两个参数，请求方式和请求地址

open( 'get' , 'http://localhost:3000/dizhi' )

3. 发送请求

send()

4. 获取服务器端响应到客户端的数据

因为不可能发送完直接响应，所以需要绑定 onload 事件，响应成功之后会自动触发

xhr.onload = function() {

console.log( xhr.responseText )

}

5. 服务器端向客户端响应：使用get () 创建一个路由

app = express();

app.get( 'dizhi' , (req, res) => {

res.send(' hello ')

})

注意：在http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都是会被转换为对象字符串传输。( typeof 结果 == 是字符串string )

1. JSON.parse() 将 json 字符串转换为 json 对象

请求参数的格式：参数名称等与参数值，多个参数之间用 and符& 进行拼接

1. post 请求方式的请求参数不是放在地址栏后面，是放在请求体 send() 中，而且需要在请求报文中明确设置请求参数内容的类型 Content-Type:

2. 设置请求报文当中的报文头信息：设置请求参数的格式类型： xhr.setRequestHeader( ' ContentType ', 'application/x-www-form-urlencoded' ); xhr.send( ' name=zhangsan&age=20 ' )

请求报文：

1. 在 HTTP 请求和响应的过程中传递的数据块就叫做报文，包括要传送的数据和一些附加的信息，这些数据和信息要遵守规定好的格式

2. 报文头存储的是一些键值对的信息，报文体主要存储的是一些内容（post请求参数）

3. 报文头和报文体，在请求的过程中，整体的被发送到服务器端

4. 在服务器端接受post 请求参数：借助 body-parser 这个解析器；使用req.body 来获取客户端传递给服务器端的 post 请求参数

5. form data 里面就是 post 请求参数（network -> xhr -> post -> header -> form data）

请求参数的格式：

1. application/x-www-form-urlencoded

2. application/json

3. 传递请求参数的时候 json 又必须转换为 json 字符串：JSON.stringify()

4. request payload 里面放的是客户端向服务器端传递的 json 类型的数据

5. app.use( bodyParser.urlencoded() ) 改为 app.use( bodyParser.json() )

注意： get 请求是不能提交 json 对象的数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的

Ajax 状态码：

0: 请求未初始化（还没有调用open() ）

1: 请求已经建立，但是还没有发送（还没有调用send() ）

2: 请求已经发送

3: 请求正在处理，通常响应中已经有部分数据可以用

4: 响应已经完成，可以通过并使用服务器的响应了

获取Ajax 状态码： xhr.readyState

onreadystatechange 事件：当ajax 状态码发生变化的时候自动触发该事件

结果：顺序输出 0，1，2，3，4

ajax 错误处理：

FormData 对象的作用：

1. 模拟HTML 表单，相当于将HTML 表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式

2. 异步上传二进制文件（如：图片文件，视频文件，音频）

使用：

1. 准备 HTML 表单：

2. 将HTML 表单转化为 formData 对象：

let form = document.querySelector('#form')

let formData = new FormData(form)

3. 提交表单对象：xhr.send( formData ) formdata 不能用于get 请求

客户端：

服务器端如何接收：

使用formidable 插件获取客户端发送过来的 fromdata 对象

app.post( '/formdata', (req,res) =>{//创建formdata 表单解析对象const form = new formidable.IncomingForm()//解析客户端传递过来的fromdata 对象,fieds 表单中普通请求参数，files 文件上传相关信息form.parse(req, (err, fields, files)=>{res.send(fields)})
})

formdata 对象的实例方法：

1. formdata.get('key') 获取表单对象属性的值

2. formdata.set('key', 'value') 设置表单对象中属性的值 ,不管输入的是什么，最后向服务器端发送的都是set 设置的值。如果设置的属性是已经存在的，则会覆盖属性原有的值，如果是不存在的，就会创建这个表单属性以及值

3. formdata.delete('key') 删除表单对象中属性的值

4. formdata.append('key', 'value') 向表单中追加值

注意：set在属性名已经存在的情况下会覆盖，append 会保留两个值

formdata 文件上传：

1. 准备文件选择控件：

代码：

服务器端：

保留文件上传的后缀名： form.keepExtensions = true;

文件上传进度展示：

图片即时预览：

服务器端代码：

客户端：

动态创建标签，而不是直接获取HTML中的标签，是因为不想用户看到图片加载的过程，而是想等图片加载完成之后，再设置src的属性。

Ajax，FormData相关推荐

spring 注解上传文件 @RequestParam，FormData上传文件
一. 首先我们需要对formdata有所了解 1.FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,这个可以在浏览器console一下就知道了.我们可以通过append向F ...
不使用Ajax，如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
JQuery Ajax使用FormData对象上传文件图片
通过jQuery Ajax使用FormData对象上传文件 FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单" ...
ajax，HTTP原理 : 网络传输协议，网页从输入url到渲染的流程，函数防抖和节流
一. 前后端交互流程 1.服务器 : 提供某种服务器的机器(计算机) qq音乐:音频服务器 , 迅雷:文件服务器 , qq邮箱:邮件服务器,爱奇艺:视频服务器,谷歌:web服务器 2. 前端访问服 ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
一个非常简单的 ASP.NET MVC 示例：长轮询（又叫：反向 AJAX，英文名：Comet）实现...
关于长轮询(又叫:反向 AJAX,英文名:Comet)的介绍,请查看:反向Ajax,第1部分:Comet介绍下面是代码实现: UI: <p><input type="b ...
$.ajax data怎么处理_不会吧，不会吧，不愧是Ajax，jQuery Ajax啊
Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...
ajax请求的五个步骤_监控整个页面，非AJAX，需要通知
ajax请求的五个步骤最近,在JSF中开发新图表和图表"导出服务"时,我遇到了一个非常普遍的问题. 当您执行长时间运行的任务(操作)时,您希望在开始时显示状态"请稍候- ...

Ajax，FormData

Ajax，FormData相关推荐

最新文章

热门文章