JS获取一个表单字段中多条数据并转化为json格式

如图需要获取下面两个li标签里面的数据，然后传给后台；而后台接收的数据格式是json的，所以需要把两个li里面的信息转化为以下格式的。

{recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海}

代码如下：

var recieverArr = []; //全局变量
var recieverMsg = {}; //全局变量
function recieverMsgToJson(parentFormId){  //若有多个表单公用这个函数，这里需要传所属表单的ID；例如新增和修改。
 $(parentFormId + ".recieverList li").each(function(m){  //遍历每个li，当前有两个li
   var recieverAttributes = [];
   $(this).find("span").each(function(n){  //遍历每个li下的span，而每个li下有三个span
     recieverAttributes[n] = $(this).children("input").val();  //找到每个span下存放着数据的input框，并获取值存放到数组中
   });
   var recieverObj = {  //用对象来表示数据；这时对象是{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海}
     receiverName:recieverAttributes[0],
     receiverPhone:recieverAttributes[1],
     receiverAddress:recieverAttributes[2]
   };
   recieverArr.push(recieverObj);
 });
}
recieverMsg = JSON.stringify(recieverArr).replace(/\[|]/g, '') //将数组转化为json格式
console.log(recieverMsg)
//{recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海}
 $.ajax({
  url: '',
  type: 'post',
  data: {
   receiverInfo:recieverMsg,//收件人信息
  },
  traditional:true,
  success: function(data){
   console.log(data);
  },
  error: function() {
   alert("新增订单失败")
  }
 })

总结

以上所述是小编给大家介绍的JS获取一个表单字段中多条数据并转化为json格式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jquery自动将form表单封装成json的具体实现

    前端页面: 复制代码 代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr

  • 原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

  • jQuery把表单元素变为json对象

    复制代码 代码如下: (function($){  $.fn.serializeObject=function(){             var inputs=$(this).find("input,textarea,select");             var o = {};             $.each(inputs,function(i,n){                 switch(n.nodeName.toUpperCase()){          

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • javascript表单域与json数据间的交互第1/3页

    包括对象中有集合属性.对象中引用其他对象属性: 复制代码 代码如下: /** **json对象数据设置到表单域中 */ function jsonObjectToForm(form, jsonObject){     for(i = 0, max = form.elements.length; i < max; i++) {         e = form.elements[i];         eName = e.name;         if(eName.indexOf('.') >

  • 将JavaScript的jQuery库中表单转化为JSON对象的方法

    大家知道Jquery中有serialize方法,可以将表单序列化为一个"&"连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现.   我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成":"."'": /** * 重置form表单 * @param formId form的id */ function resetQuery(formId){ var fid = "#&qu

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • JS获取一个表单字段中多条数据并转化为json格式

    JS获取一个表单字段中多条数据并转化为json格式

    如图需要获取下面两个li标签里面的数据,然后传给后台:而后台接收的数据格式是json的,所以需要把两个li里面的信息转化为以下格式的. {recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海} 代码如下: var recieverArr = []; //全局变量 var recieverMsg = {}; /

  • 在Struts2中如何将父类属性序列化为JSON格式的解决方法

    项目前端由于采用Extjs4,列表分页需要返回三个参数:totalCount(记录总数).start(开始位置).limit(每页条数).由于项目中将有很多grid需要分页,因此想将分页信息放到单独的Action类里边,需要分页的Action直接继承该类即可.原struts.xml配置如下: 复制代码 代码如下: <package name="admin" namespace="/admin" extends="json-default"&

  • php上传图片获取路径及给表单字段赋值的方法

    本文实例讲述了php上传图片获取路径及给表单字段赋值的方法.分享给大家供大家参考,具体如下: 1. 调用方法例子: 大图路径: <input type="text" name="bigImageURL" id="bigImageURL" value=""> <iframe src="uppic.php?id=bigImageURL" width="600" height

  • JS获取一个字符串中指定字符串第n次出现的位置

    了解类似的获取字符位置的方法: charAt() 获取字符串指定位置的字符 用法:strObj是字符串对象,index是指定的位置,(位置从0开始数) strObj.charAt(index) indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 用法:stringObject是字符串对象,searchvalue是指定的字符串值,fromindex(可有可无)指定开始匹配字符串值的位置,若无,表示从0位置开始. stringObject.indexOf(searchvalue

  • PHP处理大量表单字段的便捷方法

    关于程序开发中的表单批量提交策略 很多时候一个表单太多的字段,如何能够高效获取表单字段,也为如何提神开发的效率和统一性? 比如一个系统的某个有26个字段,那么我用表单的名称用26个a到z的字母, 你是选择 <input type="text" name="a">,<input type="text" name="a">,--,<input type="text" name=&q

  • django-xadmin根据当前登录用户动态设置表单字段默认值方式

    相信你一定会设置一个普通字段的默认值: class Offer(models.Model): salary = models.CharField(max_length=64, blank=True, default='6000', verbose_name='薪资待遇') 相信你还能动态设置外键字段的默认值: class Interview(models.Model): department = models.ForeignKey('departments.Department', relate

  • js获取form表单所有数据的简单方法

    js获取form表单所有数据的简单方法

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

  • JS获取一个未知DIV高度的方法

    本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如: var height = element.clientHeight; 这种做法的局限: 1. 如果元素的display属性设置为none, 那么得到的结果为0 2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug 下面是Prototype提供的方法,能够兼容各种浏览器,同时在元素隐

  • js获取UEditor富文本编辑器中的图片地址

    写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容:2.将获取到的字符串转换成jquery对象:3.选择器找到img元素,获取src值. var content= UE.getEditor('details').getContent();//获取编辑器内容 var $div = document.createElement("div");//创建一个div元素对象 $div.innerHTML = content;//往div里填充html var $v = $

  • 用JS编写一个函数,返回数组中重复出现过的元素(实例)

    用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

随机推荐