Ajax提交form表单数据

<form action="/login" id = "f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit" >提交</button>
  </form>

<script>
    $(function () {
      //  1.监听表单的提交事件
      $('#f1').on('submit', function (e) {  
         e.preventDefault()                  // 2.阻止表单的默认行为
         var formdata = $('#f1').serialize()             // 3. 快速获取表单中的数据
        //调用的结果：
        // username=用户名的值&password=密码的值
        //因为函数返回结果会用表单元素的name属性来表示，
        //所以使用serialize()快速获取表单数据时需要为每个表单元素设置name属性且不重复

                 // 4.使用$.ajax()发起POST请求
      $.ajax({                              
        type : 'POST',                       //请求方式
        url : 'http:///www.blabala......',  //请求的URL地址
        data:{formdata},
        success: function(res) {            //请求成功后的回调函数
          console.log(reg);
        }
       })
      })
    })
  </script>
总结

需要注意的几个点：

• 阻止表单的默认提交行为
• 使用serialize（）函数获取表单数据需要先给每个表单元素设置name属性
• 表单需要上传文件时，必须将表单属性 enctype设置为multiparty/form-data