form表单的基本使用

form 标签的属性 

 

1.action属性的值应该是后端提供的一个url地址 ,这个url地址专门负责接收表单提交过来的数据 

当<form>表达在未指定action属性值的情况下 ,action的默认值为当前页面的url地址 

注意:当提交表单后，页面会立即跳转到action属性指定的url地址 

2. target属性用来规定在何处打开 action URL

 3. method属性用来规定以何种方式把表单数据提交到action url 。可选值有get和post

默认情况下 ，method的值为get,表示通过url地址的形式把表单数据提交到action url 

注意: Get方式适合用来提交少量的、简单的数据，

         Post方式适合用来提交大量的、复杂的、或包含文件上传的数据 

4. enctype属性用来规定再发送表单数据之前 如何对数据进行编码 

---

表单的同步提交及缺点 

1.什么是表单的同步提交 

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交 。

2.表单同步提交的缺点 

• <form>表单同步提交后 ，整个页面会发生跳转 ，跳转到action url所指向的地址，用户体验很差 。
• < form> 表单同步提交后 ，页面之前的状态和数据会丢失 。

3.如何解决表单同步提交的缺点 

表单只负责采集数据，Ajax负责将数据提交到服务器 

---

监听表单的提交事件

1.在jQuery中，可以使用如下两种方式，监听到表单的提交事件

 <form action="/login" id="f1">   
   <input type="text" name="user_name" />      
   <input type="password" name="password" />      
   <button type="submit">提交</button>   
 </form>   
 <script>        //第一种方式
  $(function() {            
     //$('#f1').submit(function() {
         // alert('监听到了表单的提交事件 ')           
    //})            
    //第二种方式            
    $('#f1').on('submit', function() {        
        alert('监听到了表单的提交事件')      
      })        
  })    
 </script>

2.阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下：

<script>        
   //第一种方式        
$(function() {     
    $('#f1').submit(function(e) {              
    //阻止表单的提交和页面的跳转               
         e.preventDefault()            
     })            
  //第二种方式            
  // $('#f1').on('submit', function(e) {            
     //阻止表单的提交和页面的跳转            
      //e.preventDefault()            
  // })       
})   
</script>

3.快速获取表单数据

  使用serialize()函数，函数示例如下：

<script>        
 //第一种方式        
$(function() {        
    $('#f1').submit(function(e) {              
      //阻止表单的提交和页面的跳转             
       e.preventDefault()              
      var data = $(this).serialize()              
      console.log(data);                
     })              
})    
</script>

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