Jquery获取form数据：如何使用Jquery获取表单提交数据

一、Jquery是什么？

在开始学习如何使用Jquery获取表单提交数据之前，先来了解一下什么是Jquery。Jquery是JavaScript库，它主要用于简化HTML文档的遍历、事件处理、和动画等操作。Jquery最大的优点是，它能够帮助开发人员用更少的代码来完成相同的工作。因此，它非常适用于快速开发和跨浏览器的应用程序。

二、如何使用Jquery获取表单数据？

使用Jquery获取表单提交的数据，需要以下两个步骤：

1、捕获表单提交事件

在HTML中，使用form元素可以创建表单，使用submit事件可以捕获提交事件。首先，通过Jquery选择器选中表单元素，然后使用submit事件来捕获表单的提交。

$( "form" ).submit(function( event ) {
  event.preventDefault();
});

在这段代码中，我们使用了preventDefault()方法来阻止表单的默认行为，也就是阻止表单提交。因此，在接下来的代码中，我们可以在不提交表单的情况下访问表单中的数据。

2、获取表单数据

接下来就可以获取表单数据了。在Jquery中，可以使用val()方法、serialize()方法和serializeArray()方法来获取表单数据。

val()方法

val()方法用于获取表单元素的值。例如，我们要获取表单中name属性为username的输入框的值，可以使用下面的代码：

$( "form" ).submit(function( event ) {
  event.preventDefault();
  var username = $( "input[name='username']" ).val();
  console.log( username );
});

上面的代码中，我们使用Jquery选择器选中了name属性为username的输入框，并用val()方法获取了它的值。最后，使用console.log()方法将值输出到控制台，以便于调试。

serialize()方法

serialize()方法用于序列化表单中的元素值。序列化是将表单元素的值编码成URL编码的字符串。可以用于将表单数据封装成一个字符串，方便提交给服务器。

$( "form" ).submit(function( event ) {
  event.preventDefault();
  var form_data = $( this ).serialize();
  console.log( form_data );
});

在这段代码中，我们使用this关键字来代替表单元素，使用serialize()方法对表单数据进行序列化。最后，使用console.log()方法将序列化后的数据输出到控制台。

serializeArray()方法

serializeArray()方法用于序列化表单为一个数组。对于Ajax请求，序列化为数组可以更加方便地处理数据。

$( "form" ).submit(function( event ) {
  event.preventDefault();
  var form_array = $( this ).serializeArray();
  console.log( form_array );
});

在这段代码中，我们使用this关键字来代替表单元素，使用serializeArray()方法对表单数据进行序列化，将序列化的结果存储在form_array变量中。最后，使用console.log()方法将序列化后的数据输出到控制台。

三、完整代码示例

  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("form").submit(function(event){
        event.preventDefault();
        var username = $("input[name='username']").val();
        console.log(username);
        var form_data = $(this).serialize();
        console.log(form_data);
        var form_array = $(this).serializeArray();
        console.log(form_array);
      });
    });
  </script>


  
  

    Username:
    <input type="text" id="username" name="username">


    Password:
    <input type="password" id="password" name="password">


    <input type="submit" value="Submit">