02 Ajax表单提交

简介: Ajax表单提交

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

0c0d6849ef1c49bf928c3f730a7684af.png

一、表单概念

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的方式来提交。

要点:

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

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

二、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. 格式1: serialize(form标签) 返回值是:查询字符串的格式
  2. 格式2: serialize(form标签, { hash: true }) 返回值是: json对象

格式1: serialize(form标签)

b74974fabbd64a979fa418d1740f4cae.png

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

21e2edb6d22d4729880f0c041d108bd4.png

2.FormData

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

FormData如何使用?(例子参考文件上传案例)

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

三、文件上传案例分析

1346955a3c4544e8b80c66a91c4b59e7.gif

整体思路是:

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.url
                    console.log(res);
                })
            })
    </script>
</body>
</html>

注意点:

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

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

(log打印的是文件/图片的存储位置)




相关文章
|
4月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
38 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
前端开发 安全 JavaScript
form表单提交的submit和ajax区别
有关同源策略和跨域,可以参考 跨域的那些事儿
498 0
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发
form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别
有如下几种区别:1. Ajax在提交、请求、接收时,都是异步进行的,网页不需要刷新; Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的;2. Ajax在提交时,是在后台新建一个请求; Form却是放弃本页面,而后再请求;3.
1844 0
|
11月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
78 0
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
120 0
|
5月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
5月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
46 0
|
5月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
70 0
|
5月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用