form表单

• form表单常用于网页中需要收集多个数据的位置，比如，登录，注册，信息设置等。

常见组成：

1. 表单元素:form标签
2. 表单输入元素:常见的有input，textarea，select…
3. 提交按钮:
   • button type="submit"type默认值为submit，可以省略input type=submit
   • input type=submit

原生数据提交

<form action="http://ajax-api.itheima.net/api/data" method="get" id="form">
      <input name="a" type="text"  placeholder="请输入用户名" />
      <br />
      <input name="b" type="text" placeholder="请输入喜欢的食物" />
      <br />
      <input name="c" type="textarea" placeholder="请输入个性签名" />
      <br />
      <button>提交</button>
    </form>

1. form标签设置:

• action:接口地址
• method:请求方法

2. 表单输入元素设置：

• name:提交到服务器数据的key(参数)

• 

• 页面会重新加载

form表单-ajax提交数据

1. 阻止事件的默认行为(下面两者取其一):

• e.preventDefault()>阻止默认行为
• button的点击事件
• form的submit事件
• 目的:避免form提交数据

2. axios根据文档设置，地址，方法，参数..
3. 提交数据

form-serialize插件

• form-serialize的作用是简化获取表单数据
• 使用教程

使用步骤：

1. 导入form-serialize插件
2. 调用serialize传入form表单和选项，即可获取

• 导入之后全局会增加serialize方法

3. 注意: 表单输入元素需要有值，才可以正常获取

示例：

serialize(form表单,{hash:true}) // 对象格式
serialize(form表单,{hash:false})// key=value格式

• serialize(form表单,{hash:false}) === serialize(form表单)