jquery 表单提交数组

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在表单提交中，jQuery 可以帮助我们更方便地处理表单数据，包括数组类型的字段。

类型

在表单提交中，数组通常用于处理多个相同类型的输入字段，例如多个复选框或下拉菜单。

应用场景

假设我们有一个表单，其中包含多个复选框，用户可以选择多个选项并提交表单。我们可以使用 jQuery 来收集这些复选框的值，并将它们作为一个数组发送到服务器。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Form Submission with Array</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="checkbox" name="interests[]" value="reading"> Reading
        <input type="checkbox" name="interests[]" value="sports"> Sports
        <input type="checkbox" name="interests[]" value="music"> Music
        <button type="submit">Submit</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#myForm').on('submit', function(event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 获取复选框的值并组成数组
                var interests = $('input[name="interests[]"]:checked').map(function() {
                    return $(this).val();
                }).get();

                // 发送数据到服务器
                $.ajax({
                    url: 'submit.php', // 替换为你的服务器端处理脚本
                    type: 'POST',
                    data: { interests: interests },
                    success: function(response) {
                        console.log('Form submitted successfully:', response);
                    },
                    error: function(xhr, status, error) {
                        console.error('Form submission failed:', error);
                    }
                });
            });
        });
    </script>
</body>
</html>