jquery获取表单全部信息

在写静态页面时我们难免会写入表单来获取用户信息，如果用户信息量过大那么一条条获取就会很麻烦，那么就可以通过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练习：使用jQuery获取表单数据，使用弹窗显示。
表单样式: HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
php+获取jq表单数据类型,jquery怎么获取表单标签值
在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单单行文字域: 密码域: 单选:男女男女 ...
php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
Bootstrap4+MySQL前后端综合实训-Day08-PM【ajax获取表单标签内容、根据“栏目信息”添加“新闻信息”、新闻管理系统-项目展示】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 ajax获取表单标签内容 ajax根据数据库加载select下来列 ...
php获取表单信息的代码_PHP获取HTML文件名表单数据等
1.PHP获取表单各项数据 --- 与表单提交的方式有关 GET方式,格式:$_GET["formelement"] POST方式,格式:$_POST["formelem ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
form表单提交后台获取表单信息
一.需求客户端通过前端填写表单信息,后台获取表单信息进行相应处理. 二.工具前端采用jsp,后台 springmvc 三.示例 (一).前端输入的form表单代码 <form id=&quo ...
Servlet之请求包含与会话技术获取表单信息(Cookie)
request获取form表单中提交的数据用ServletContext获取 ServletContext context = this.getServletContext(); String us ...
php获取序列化表单,jQuery 序列化表单数据 serialize() serializeArray()
jQuery 序列化表单数据 serialize() serializeArray() 格式:var data = $("form").serialize(); 功能:将表单内容序 ...

jquery获取表单全部信息

jquery获取表单全部信息相关推荐

最新文章

热门文章