通过Ajax提交表单数据

2、通过Ajax提交表单数据

2.1、监听表单提交事件

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

 

引入jQuery

<script src="js/jquery.min.js"></script>

html文件

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

js代码

$(function () {
    // 第一种方式
    $('#f1').submit(function () {
      console.log('监听到了');
    })
    // 第二种方式
    $('#f1').on('submit', function () {
      console.log('监听到了');
    })
  })  

2.2、阻止表单的默认行为

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

引入jQuery

<script src="js/jquery.min.js"></script>

html文件

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

js代码

  $(function () {
    // 第一种方式
    $('#f1').submit(function (e) {
      e.preventDefault()
    })
    // 第二种方式
    $('#f1').on('submit', function (e) {
      e.preventDefault()
    })
  })  

2.3、快速获取表单中的数据

1、serialize（）函数

为了简化表单中数据的获取操作，jQuery提供了serialize)函数。其语法格式如

serialize(函数的好处)：可以一次性获取到表单中的所有的数据

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

 

引入jQuery

<script src="js/jquery.min.js"></script>

html文件

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

js代码

 $(function () {
    // 第一种方式
    $('#f1').submit(function (e) {
      e.preventDefault()
      var data = $(this).serialize()
      console.log(data);
    })
    // 第二种方式
    $('#f1').on('submit', function (e) {
      e.preventDefault()
      var data = $(this).serialize()
      console.log(data);
    })
  })