如何使用JavaScript/jQuery获取表单数据

如何使用JavaScript/jQuery获取表单数据

serializeArray()方法通过序列化表单值创建一个对象数组(名称和值)。这个方法可以用来获取表单数据。

语法:

$(selector).serializeArray()

参数:它不接受任何参数。

返回值:它返回输入字段中的所有值。

示例:

<!DOCTYPE html>
<html>
   
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
      
    <script>
        (document).ready(function() {
            ("button").click(function() {
                var x = ("form").serializeArray();
                .each(x, function(i, field) {
                    $("#output").append(field.name + ":"
                            + field.value + " ");
                });
            });
        });
    </script>
      
    <style>
        #GFG {
            width: 300px;
            padding: 50px;
            height: 150px;
            border: 2px solid green;
        }
    </style>
</head>
   
<body>
    <div id="GFG">
        <form action="#">
            Name: <input type="text" 
                style="margin: 10px;" name="Name">
            <br>
        </form>
   
        <button>Submit</button>
    </div>
   
    <div id="output"></div>
</body>
   
</html>

输出:

  • 在点击按钮之前。
    如何使用JavaScript/jQuery获取表单数据?
  • 点击该按钮后。
    如何使用JavaScript/jQuery获取表单数据?

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程