一、表单概念

1.表单

2.提交的两种方式

二、form-serize与FormData

1.form-serize

2.FormData

三、文件上传案例分析

以下的既为本文的核心概括

一、表单概念

1.表单

form标签（表单）是用来收集用户输入的信息。

表单构成：

表单标签： form

表单域: input, checkbox, select ...

表单按钮<button type="submit"></button>

`2.提交的两种方式`

1.表单自我提交

<!-- action: 接口的url地址 method: get或post，数据的提交方式（默认为GET） -->
<form action="提交地址" method="提交方式">// 其他元素
</form>

注意点：该提交方法会提交到指定地址并且会刷新整个网页的。靠的是method和action这两个属性

2.表单Ajax提交（案例参考下面的例子form-serize）

表单的默认提交效果不好（有页面刷新），我们直接用ajax的方式来提交。

要点：

给按钮添加点击事件的回调。
在回调函数中发请求

使用该方法不会存在整个页面提交的情况。

二、form-serize与FormData

1.form-serize

概念：能使用form-serialize插件, 提取整个表单数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语法_表单Ajax提交</title>
</head><body><form><div><!-- 用户名 --><span>用户名：</span><input type="text" name="username" id="username"></div><div><!-- 密码： --><span>登录密码：</span><input type="password" name="password" id="password"></div><div><!-- 提交按钮 给按钮补充id属性，方便dom获取--><button id="submit">提交</button></div></form><script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script><script src="./lib/form-serialize.js"></script><script>document.querySelector('#submit').addEventListener('click',(e)=>{e.preventDefault()let form = document.querySelector('form')//  { hash: true }加上了这个content-type { hash: true }的类型会变，具体的需要看后端需求let formObj = serialize(form, { hash: true })console.log(formObj);axios({url:'http://ajax-api.itheima.net/api/data',method:'POST',data:formObj}).then(res =>{console.log(res);})})</script>
</body></html>

格式：

格式1： serialize(form标签) 返回值是：查询字符串的格式

格式2： serialize(form标签, { hash: true }) 返回值是： json对象

格式1： serialize(form标签)

格式2：serialize(form标签, { hash: true })

2.FormData

以键值对形式存放数据的容器, 常用于装载文件对象

FormData如何使用?（例子参考文件上传案例）

实例化一个对象，用它的append方法加入参数名和值

三、文件上传案例分析

整体思路是：

1.获取上传文件按钮

2.注册点击事件与改变事件

3.创建FormData容器

4.用Ajax获取的图片送到到服务器中

5.之后执行then操作获取成功之后：将图片的src值重新获取过来渲染到页面上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_头像上传</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>.thumb-box {text-align: center;margin-top: 50px;}.thumb {width: 250px;height: 250px;object-fit: cover;border-radius: 50%;border: 5px solid black !important;}</style>
</head><body><div class="thumb-box"> <!-- 头像 --><label for="iptFile"><img class="img-thumbnail thumb" src="./lib/images/cover.jpg"></label><div class="mt-2"><button id="btn">文件上传</button><input type="file" hidden id="iptFile"  accept="image/*"></div></div><script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script><script>/* 1.获取上传文件按钮2.注册点击事件与改变事件3.创建FormData容器 4.用Ajax获取传递的数据到服务器中5.将图片的src值重新获取过来渲染到页面上*/document.querySelector('#btn').addEventListener('click',()=>{document.querySelector('#iptFile').click()})document.querySelector('#iptFile').addEventListener('change',(e)=>{console.log(e);// 获取到文件存储的位置之后用容器存起来console.log(e.target.files[0]);const fd =new FormData()fd.append('avatar',e.target.files[0])axios({url:'http://ajax-api.itheima.net/api/file',method:'POST',data:fd}).then(res=>{document.querySelector('img').src=res.data.data.urlconsole.log(res);})})</script>
</body></html>

注意点：

file文件可以存的文件不限于是img,FormData中存放的是文件的位置（图片），之后通过data传递到服务器上去。

传上去之后，正确了才会走then的操作，将数据与图片的src进行更换

（log打印的是文件/图片的存储位置）

02 Ajax表单提交相关推荐

ajax刷新iframe页面,通过iframe实现简单的ajax表单提交
之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照 ...
使用HTML5 FormData轻松完成Ajax表单提交
在我们的日常开发中,经常都会用到Ajax来提交表单.让我们来看一个典型的例子: <form id="myform" action="webservice.php&q ...
ajax提交输入内容,当输入用于提交时，AJAX表单提交
我有一位设计师坚持通过点击回车和由AJAX提交的帖子和由Fancybox提供的回复提交的单个表单域.问题是return false不能阻止页面的提交.当输入用于提交时,AJAX表单提交我在那里做错了 ...
php提交后刷新父页面,jquery – php ajax表单提交没有刷新父页面
我有一些问题的ajax表单提交 $("#send").on("click", function() { $.ajax({ type: "POST&qu ...
Form 表单提交和 Ajax 表单提交的一些区别
自己一些心得体会: 1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台 ajax 表单提交,是可以局部提交,具有ajax的所有属性... ...
web 表单自定义字段_带有自定义服务器字段验证的AJAX表单提交
web 表单自定义字段 Overview 总览 This article presents a method for validating form data in a PHP script usin ...
form表单提交和ajax表单提交
相信大家在做itoo的时候都用过ajax异步提交数据,好处自然不言而喻,数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低.而表单提交则整个页面重绘.如果表单提交后跳转到另一个页面获取数据这种情 ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...

02 Ajax表单提交

一、表单概念

1.表单

`2.提交的两种方式`

二、form-serize与FormData

1.form-serize

2.FormData

三、文件上传案例分析

02 Ajax表单提交相关推荐

最新文章

热门文章