News Contents
信息中心

jquery-读取form表单中的所有数据列表

发表日期:2019/8/22      浏览次数:

1.serializeArray()方法

  格式:var jsonData = $("form").serializeArray();

  功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

  比如,[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name

<script>

$(function() {

  $('#submit').click(function() {

    var d = {};

    var t = $('form').serializeArray();

    $.each(t, function() {

      d[this.name] = this.value;

    });

    alert(JSON.stringify(d));

  });

});

</script>

<form>

<input id="a1" type="input" value="" name="a1"><br>

<input id="a2" type="input" value="" name="a2"><br>

<input id="a3" type="input" value="" name="a3"><br>

<input id="a4" type="input" value="" name="a4"><br>

<select id="ax" name="ax">

<option value="0">选项1</option>

<option value="1">选项2</option>

</select><br>

<input id="submit" type="button" value="提交" name="submit">

</form>


2.serialize()方法

  格式:var data = $("form").serialize();

  功能:将表单内容序列化成一个字符串。

  这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

<div class="modal-body">

<form class="form-horizontal">

<div class="form-group">

 <label for="inputEmail3" class="col-sm-2 control-label">用户</label>

 <div class="col-sm-10">

  <input type="text" class="form-control" name="empName" id="inputEmail3" placeholder="Username">

 </div>

</div>

<div class="form-group">

 <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

 <div class="col-sm-10">

  <input type="email" class="form-control" name="email" id="inputPassword3" placeholder="email">

 </div>

</div>

<div class="form-group">

 <div class="col-sm-offset-2 col-sm-5">

<div class="radio">

<label class=" radio-inline">

<input type="radio" name="gender" id="inlineRadio1" value="F"> 女

</label>

<label class="radio-inline">

<input type="radio" name="gender" id="inlineRadio2" value="M"> 男

</label>

</div>

</div>

</div> 

<div class="form-group">

 <label for="inputPassword3" class="col-sm-2 control-label">部门</label>

 <div class="col-sm-5 ">

  <select class="form-control" name="dId" id="select_dept"> 

</select>

 </div>

</div><input id="submit" type="button" value="提交" name="submit">

</form>

   </div>

<script>


</script>


<script>

$(function() {

  $('#submit').click(function() {

   alert($(".form-horizontal").serialize());

});

});

</script>


盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!