jquery获取表单全部信息

本文介绍了一种使用jQuery简化表单数据收集的方法,通过一个示例展示了如何一次性获取表单中的所有用户输入,包括文本、密码和选择框等元素,并将其转换为JSON格式,便于进一步处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在写静态页面时我们难免会写入表单来获取用户信息,如果用户信息量过大那么一条条获取就会很麻烦,那么就可以通过jquery一次性获取表单里的全部的信息,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="../../educational/css/register.css" type="text/css">
    <link rel="stylesheet" href="../../educational/bootstrap/css/bootstrap.min.css" type="text/css"/>
    <script src="../../educational/js/jquery-2.0.3.min.js"></script>
    <title>学生校园管理系统</title>
</head>
<body>

<div class="box">

    <div class="header">欢迎注册</div>

    <div class="context">
        <form method="post" class="form-horizontal" role="form">

            <div class="form-group">
                <label class="control-label">学生学号</label>
                <div>
                    <input type="text" class="form-control" name="number" placeholder="请输入学号">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">输入密码</label>
                <div>
                    <input type="password" class="form-control" name="pwd1" id="pwd1" placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">确认密码</label>
                <div>
                    <input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="请确认密码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">手机号码</label>
                <div>
                    <input type="text" class="form-control" name="phone" placeholder="请输入手机号码">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">身份证</label>
                <div>
                    <input type="text" class="form-control" name="identity" placeholder="请输入身份证">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">学生性别</label>
                <div class="col-sm-2">
                    <select class="selectpicker" name="sex">
                        <option value="0">----请选择---</option>
                        <option value="1" name="man">男</option>
                        <option value="2" name="woman">女</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class=" control-label">家庭住址</label>
                <div>
                    <input type="text" class="form-control" name="address" placeholder="请输入家庭住址">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">学校名称</label>
                <div>
                    <input type="text" class="form-control" name="school" placeholder="请输入学校名称">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">学生班级</label>
                <div>
                    <input type="text" class="form-control" name="classes" placeholder="请输入班级">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">专业名称</label>
                <div>
                    <input type="text" class="form-control" name="professional" placeholder="请输入专业">
                </div>
            </div>
            <button type="button" class="but_register" id="but_register">注册</button>
        </form>
    </div>
    <div class="footer">
        青果校园学生管理系统
    </div>
</div>
</body>
<script type="text/javascript">
    $("#but_register").click(function () {
        var formData = JSON.stringify($(".form-horizontal").serialize());
        if (formData.indexOf("=")>=0) {
            formData.replace("=", ":");
        }
        console.log(formData);
    });

</script>
</html>

获取表单的整个信息的代码如上加粗所示,但是刚开始一样的代码却没有获取到表单的信息,我一开始很奇怪,后来我发现是因为input标签没有写上name属性的原因。

### 如何使用 jQuery 获取表单中的文件 为了实现通过 jQuery 获取并处理表单内的文件上传操作,可以采用如下方法: 当用户选择了要上传的文件时,会触发 `$('input[name=Filedata]').change` 事件,在此事件处理器中调用了初始化上传表单的方法 `initUploadForm()`[^1]。 HTML 表单需包含 `<input type="file">` 字段以便浏览和选择待上传文件。按照 HTML 规范的要求,此时应确保表单的提交方式为 POST 方法,并设置编码类型属性 `enctype="multipart/form-data"`[^2]。 具体到获取文件对象的操作上,可以通过 jQuery 的 `.prop()` 或者原生 DOM API 来访问该输入框所关联的 FileList 对象,进而取得选中的文件实例。下面给出一段示范代码用于展示这一过程: ```javascript // 假设有一个 id 为 'myForm' 的表单以及 name 属性为 'myfile' 的文件域 $('#myForm input[type=file][name=myfile]').on('change', function() { let files = $(this).prop('files'); if (files.length > 0){ console.log(files[0]); // 输出第一个被选取的文件信息 // 可在此处继续编写逻辑来处理这个文件, // 比如发起 AJAX 请求将其发送至服务器端 } }); ``` 上述脚本监听了指定文件域的变化情况,一旦检测到有新文件被选定,则读取这些文件的信息并通过控制台打印出来。实际应用中可以根据需求进一步扩展功能,比如验证文件大小、类型等限制条件后再执行相应的业务流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值