正文

jquery获取form表单数据

小编
小编 V管理员 /0 评论 /70 阅读
0211
欧意国内注册

jQuery获取form表单的方法如下：

1、确保已经引入了jQuery库，在HTML文件中的<head>标签内添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2、创建一个HTML文件，包含一个<form>标签，用于提交表单数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取form表单示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <br>
        <input type="submit" value="提交">
    </form>
    <script>
        // 在这里编写jQuery代码
    </script>
</body>
</html>

3、使用jQuery获取<form>标签并处理表单数据，在<script>标签内添加以下代码：

$(document).ready(function() {
    $("#myForm").submit(function(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        var formData = $(this).serialize(); // 获取表单数据
        console.log("表单数据：", formData); // 输出表单数据
    });
});

在这个示例中，我们使用了$(document).ready()函数来确保在DOM加载完成后执行jQuery代码，我们使用$("#myForm").submit()方法监听表单的提交事件，当表单提交时，我们使用event.preventDefault()阻止表单的默认提交行为，然后使用$(this).serialize()获取表单数据，并将其输出到控制台。