form表单及ajax使用form-serialize提交

1.表单定义

在网页中，表单主要负责数据的采集功能

表单由 表单标签 表单域 表单按钮 组成

html的form标签就是表单标签，是一个容器，用来将页面中指定的区域划定为表单区域，

表单域 提供了采集用户信息的渠道，input textarea select

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，把采集到的数据提交给服务器。

   <form action="#" method="get">
        <input type="text" name="username">
        <button>登录</button>
    </form>
    

2.form属性

type=submit 表示提交按钮 button的type属性的默认值就是submit，可以省略这个属性

action 就是请求的url地址，就是把表单采集到的数据提交到action里的地址

method get/post 数据的请求方式，默认是get

3.表单的get请求

过程：

method是get，那么可以省略，因为是默认

在url地址上可见

// 表单自己提交，不需要js参与

    <form action="http://www.top:3009/api/form">
        <div>
            <span>用户名</span>
            <input type="text" name="username">
        </div>
        <div>
            <span>密码</span>
            <input type="password" name="password">
        </div>
        <button>提交</button>
    </form>
    <!-- {"message":"以 GET 方式提交 form 表单成功！","query":{"username":"123","password":"33434"}} -->

4.表单的post请求

过程：

post必须要加method url地址上就没有变化了，更安全，传输的数据更大

点了提交成功，就会直接提示 以post方式提交成功

    <form action="http://www.top:3009/api/form" method="post">
        <div>
            <span>用户名</span>
            <input type="text" name="username">
        </div>
        <div>
            <span>密码</span>
            <input type="password" name="password">
        </div>
        <button>提交</button>
    </form>
    <!-- {"message":"以 POST 方式提交 form 表单成功！您的 enctype 值为：application/x-www-form-urlencoded","body":{"username":"1213","password":"1312"} -->

这样也可以直接提交，为什么还要用axios？

form表单提交数据，点了提交之后，整个页面发生了跳转，跳转到了action属性所指向的url地址，get和post都会发生跳转，不好。用户体验不好。导致用户无法停留在当前页面。

form表单身兼数职，既负责采集数据，又负责把数据提交到服务器；表单的默认提交行为（submit）导致页面的跳转。

解决：

• form表单只负责采集数据

• ajax负责将数据提交到服务器

5.使用ajax提交表单数据

过程：

submit是提交事件，清除事件对象的默认行为，preventDefault，不提交，只是采集数据。axios提交，post，再写data，使用插件获取表单数据。

插件：form-serialize，序列化得到表单数据，已下载好

使用：使用Script引入进来，引入了插件会提供一个serialize函数，可以获取表单数据，serialize（form表单的dom对象）

然后调用就会直接显示得到的数据，console，实现了表单数据序列化，但是得到的是字符串的形式

换一种方式使用

过程：

{ } 配置对象， hash配置，将收集到的表单数据转化为js对象格式

再次console，就会变成对象格式。

然后使用axios提交，参数那里直接就写data即可，箭头函数那里一样解构，就会出现提交成功的msg。