前后端交互 — ajax之form表单02 + serialize()函数 + 清空表单$(‘#formAddCmt‘)[0].reset()

一、表单

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标
签的提交操作，把采集到的信息提交到服务器端进行处理。
 
表单的组成部分
    表单标签
    表单域
    表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
    表单按钮

1.1表单标签的属性

target：默认情况下target 的值是 _self 表示在同一个页面打开；
        _blank 在新的窗口打开
 
method：默认情况下，method 的值为 get
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。（比较隐秘，提高数据的安全性）
在实际开发中，<form> 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。
 
enctype：默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data,其他情况不写，默认就行
 
 
<form action="/login" target="_blank" method="get" enctype="application/x-www-form-urlencoded">
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
    <button type="submit">提交</button>
</form>

二、表单的同步提交及缺点+解决 san

如果使用表单提交数据，则会导致以下两个问题：
 页面会发生跳转
 页面之前的状态和数据会丢失
 
解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器
 
 
$(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('监听到了表单的提交事件')
      // })
 
      // 第二种方式  按钮可以绑定click事件，表单可以绑定submit事件
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
        阻止表单的默认提交行为
        e.preventDefault()
      })
    })

三、serialize()函数 快速获取表单中的数据 

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！ 

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>
 
 
 
$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

 四、快速清空表单

$('#formAddCmt')[0].reset()
将JQ对象变成DOM对象，调用reset函数，重置表单

五、js对象和jQuery对象互转

jQuery对象转成js对象: 

两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index); 
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。 

如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //js对象 
alert(v.checked) //检测这个checkbox是否被选中 

(2)jQuery本身提供，通过.get(index)方法，得到相应的js对象
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //js对象 
alert(v.checked) //检测这个checkbox是否被选中

 

js对象转成jQuery对象: 
对于已经是一个js对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(js对象) 

如：var v=document.getElementById("v"); //js对象 
var $v=$(v); //jQuery对象 
转换后，就可以任意使用jQuery的方法了。