AJax表单提交

最新推荐文章于 2024-08-10 10:11:23 发布

CodeCxil

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量959

点赞数 1

分类专栏：前端文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_41098074/article/details/127738713

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用axios进行表单数据提交，避免form表单的刷新问题，并展示了FormData在文件上传中的应用，对比了不同请求体类型。涵盖了Ajax提交表单的优势和处理大数据的方法，适合前端开发者深入理解。

摘要由CSDN通过智能技术生成

axios 提交表单数据

表单的作用是什么？网页中收集用户输入的信息

表单的组成有什么？

表单、表单域、表单按钮

1.2表单自我提交

form表单是否能够自我提交？

表单，表单域和提交按钮配合才可以

form表单自我提交的缺点是什么？

整个网页跳转（刷新网页），体验不好，所以很少使用

利用axios 提交表单！

Ajax提交表单思路是什么？

给按钮绑定点击事件，并阻止表单默认提交行为

事件处理函数中，获取每个表单域的值

基于axios携带数据给服务器

Ajax比form表单自我提交的优势在哪里？

Ajax局部提交，不会跳转到提交的地址。

当表单数据很多的时候是否能整体获取？

可以使用form-serialize库获取整体表单数据！

语法serialize(表单域,{hash:true})

1.引入form-serialize.js

2.使用他提供的方法

hash 使用哈希值转换成对象

把账号和密码的例子改成整体获取？

如何获取表单整体的参数名和值？

先引入form-serialize库，并且获取整体form

再使用serialize方法传入到form标签即可

   <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
   	<script src="./form-serialize.js"></script>
       <script>
       const myForm= document.querySelector('#myForm')
       const btnLogin = document.querySelector('#btnLogin')

       btnLogin.addEventListener('click',function(e){

            e.preventDefault();

            //获取表单数据
            // const data = serialize(myForm）获取到的是一个键 值对应的  所以加一下hash 转换成对象
            const data = serialize(myForm,{hash:true})

            //3 发送请求

            axios({
                method:'post',
                url: 'http://ajax-api.itheima.net/api/login',
                data: data
            }).then(res =>{

                console.log(res)
                alert(res.data.message)
                
                

            }).catch(err=>{
                console.log(err)
                
            })
       })
           
       </script>

1、思路？

先准备好标签和样式，引入需要的库

提交按钮绑定点击事件

使用serialize方法获取整体表单数据

基于axios法搜数据给服务器验证

根据服务器返回结果给提示

1.6FormData 方法装载数据。

常用于装载文件对象。

什么是FormData?

以键值对形式存放数据的容器。

常用于装载文件对象

formData如何使用？

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

案例头像上传案例

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
       <script>
            const iptFile = document.querySelector('#iptFile');
            const btnChoose = document.querySelector('#btnChoose');
            const img = document.querySelector('.thumb')
            btnChoose.addEventListener('click',function(){
                //点击按钮让文件选择器出现
                iptFile.click();
                

                iptFile.addEventListener('change',function(e){

                    if(e.target.files[0]){

                        const fd= new FormData();
                        fd.append('avatar',e.target.files[0])
                       


                            axios({
                                method:'post',
                                url: 'http://ajax-api.itheima.net/api/file',
                                data:  fd
                            }).then(res =>{

                                //res.data 代表返回的数据  data.url 代表 data数据里面的ur
                                img.src = res.data.data.url 
                                //方法2  先解构 返回的res 对象然后就直接res调用解构的data.url数据
                            // .then(({data:res}) =>{
                            //     img.src = res.data.url
                                
                            }).catch(err=>{
                                console.log(err)
                                
                            })
                    }

                    // if(iptFile.value!=0){
                    //     const fd= new FormData();
                    //     fd.append('avatar',iptFile.value)

                    //     axios({
                    //         method:'post',
                    //         url: 'http://ajax-api.itheima.net/api/file',
                    //         data: fd
                    //     }).then(res=>{
                    //         img.src = res.data.data.url 
                    //     })
                    // }          

                })
            })

       </script>