当前位置:首页 > 编程教程 > jQuery技术文章 > 将JavaScript的jQuery库中表单转化为JSON对象的方法

JavaScript的jQuery库中表单转化为JSON对象的实例代码

  • 发布时间:
  • 作者:码农之家
  • 点击:163

这篇文章主要知识点是关于jQuery、JSON、JavaScript、jquery处理json对象 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery Mobile从入门到精通
  • 类型:jQuery大小:168.7 MB格式:PDF作者:未来科技
立即下载

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

大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。
 
我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成“:”、“‘”:

/**
* 重置form表单
* @param formId form的id
*/
function resetQuery(formId){
var fid = "#" + formId;
var str = $(fid).serialize();
//str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04
var ob= strToObj(str);
alert(ob.startdate); //2012-02-01
}
function strToObj(str){
str = str.replace(/&/g, "','" );
str = str.replace(/=/g, "':'" );
str = "({'" +str + "'})" ;
obj = eval(str);
return obj;
}

/** 
   * 重置form表单 
   * @param formId form的id  
   */  
  function resetQuery(formId){  
    var fid = "#" + formId;  
    var str = $(fid).serialize();  
    //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04  
    var ob= strToObj(str);  
    alert(ob.startdate);//2012-02-01  
  }  
    
  function strToObj(str){  
    str = str.replace(/&/g,"','");  
    str = str.replace(/=/g,"':'");  
    str = "({'"+str +"'})";  
    obj = eval(str);   
    return obj;  
  }  

个人感觉这样做有bug。
 我的方法是,先用serializeArray序列化为数组,再封装为Json对象。
 下面是表单:

 < form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< input type = "submit" />
</ form >

<form id="myForm" action="#"> 
  <input name="name"/> 
  <input name="age"/> 
  <input type="submit"/> 
</form> 


Jquery插件代码如下:
 
( function ($){
$.fn.serializeJson= function (){
var serializeObj={};
$( this .serializeArray()).each( function (){
serializeObj[ this .name]= this .value;
});
return serializeObj;
};
})(jQuery);

(function($){ 
    $.fn.serializeJson=function(){ 
      var serializeObj={}; 
      $(this.serializeArray()).each(function(){ 
        serializeObj[this.name]=this.value; 
      }); 
      return serializeObj; 
    }; 
  })(jQuery); 

 
 
下面测试一下:

$("#myForm").bind("submit",function(e){

e.preventDefault();
console.log($( this ).serializeJson());
});

  e.preventDefault(); 
  console.log($(this).serializeJson()); 
}); 

测试结果:
输入a,b提交,得到序列化结果

{age: "b",name: "a"}

 
 
上面的插件,不能适用于有多个值的输入控件,例如复选框、多选的select。下面,我将插件做进一步的修改,让其支持多选。代码如下:
 

( function ($){
$.fn.serializeJson= function (){
var serializeObj={};
var array= this .serializeArray();
var str= this .serialize();
$(array).each( function (){
if (serializeObj[ this .name]){
if ($.isArray(serializeObj[ this .name])){
serializeObj[ this .name].push( this .value);
} else {
serializeObj[ this .name]=[serializeObj[ this .name], this .value];
}
} else {
serializeObj[ this .name]= this .value;
}
});
return serializeObj;
};
})(jQuery);

(function($){ 
    $.fn.serializeJson=function(){ 
      var serializeObj={}; 
      var array=this.serializeArray(); 
      var str=this.serialize(); 
      $(array).each(function(){ 
        if(serializeObj[this.name]){ 
          if($.isArray(serializeObj[this.name])){ 
            serializeObj[this.name].push(this.value); 
          }else{ 
            serializeObj[this.name]=[serializeObj[this.name],this.value]; 
          } 
        }else{ 
          serializeObj[this.name]=this.value;  
        } 
      }); 
      return serializeObj; 
    }; 
  })(jQuery); 

这里,我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式,请自行修改相应代码。
 
测试如下:
表单:
 

< form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< select multiple = "multiple" name = "interest" size = "2" >
< option value = "interest1" > interest1 </ option >
< option value = "interest2" > interest2 </ option >
< option value = "interest3" > interest3 </ option >
< option value = "interest4" > interest4 </ option >
</ select >
< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike
< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car
< input type = "submit" />
</ form >

<form id="myForm" action="#"> 
  <input name="name"/> 
  <input name="age"/> 
  <select multiple="multiple" name="interest" size="2"> 
    <option value ="interest1">interest1</option> 
    <option value ="interest2">interest2</option> 
    <option value="interest3">interest3</option> 
    <option value="interest4">interest4</option> 
  </select> 
  <input type="checkbox" name="vehicle" value="Bike" /> I have a bike 
  <input type="checkbox" name="vehicle" value="Car" /> I have a car 
  <input type="submit"/> 
</form> 

测试结果:

{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}

处理序列化时的空格问题

jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能;但是实际使用中有时会出现如下问题:

例如

<input name="content" value="ddd 567"/>

在执行 serialize()方法后,得到的却是  ddd+567这样的字符串;即jquery的序列化方法对空格进行了转义,转换成了 + 号。

解决方法

由于serialize()方法对真正的“+”号转义的是 %2B,所以可以对serialize()后的结果进行符号替换。

例如

<input name="content" value="ddd + 567 + 987"/>

<script>

var a= $('$frm1').serialize(); //序列化,默认会调用encodeURIComponent()进行编码
alert(a); // content=ddd+++567+++987
var b = a.replace(/\\+/g," ");  // g表示对整个字符串中符合条件的都进行替换
b = decodeURIComponent(b); //对serialize后的内容进行解码
alert(b); // content=ddd + 567 + 987

</script>

 

jquery处理json对象

在服务器端的php脚本:


<?php  
$data['id'] = 1;  
$dat['name'] = "mary";  
$da['red']= array_merge($data,$dat);  
 
$data1['id'] = 2;  
$dat1['name'] = "燕子";  
$da['blue']= array_merge($data1,$dat1);  
print_r($da);   //打印出来是一个二维数组(如下)  
/*
Array 

    [red] => Array 
        ( 
            [id] => 1 
            [name] => mary 
        ) 
 
    [blue] => Array 
        ( 
            [id] => 2 
            [name] => 燕子 
        ) 

*/ 
 
 
echo json_encode($da);//输出的是一个转化成json格式的字符串,可以直接在js中用(如下)  
/*
{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"\u71d5\u5b50"}} 
*/ 
?> 

jquery脚本:
返回到js后的处理:
第一种要用到varl转化的:是字符串的时候就要用eval转化成jquery对象(如下)


var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"\u71d5\u5b50"}}';   //\u71d5\u5b50这个是php中自动转换的  
var dataObj = eval("("+arr+")");    //这里要加上加好括号和双引号的原因我也不知道,就当是json语法,只能死记硬背了  
    $.each(dataObj,function(idx,item){  
    //输出    
    alert(item.id+"哈哈"+item.name);  
}) 

第二种:不需要转化的:


var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"\u71d5\u5b50"}};  
$.each(arr,function(idx,item){  
    //输出  
    alert(item.id+"哈哈"+item.name);  
}) 

循环也有两种方法:


//方法一:

$.each(arr,function(idx,item){       
    //输出  
    alert(item.id+"哈哈"+item.name);  
}) 
//方法二:

for(var key in arr){  
    alert(key);  
    alert(arr[key].status);  

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • jQuery遍历json的实例代码
  • var obj = {status:1,bkmsg:\u6210\u529f,bkdata:[\u5415\u5c1a\u5fd7,1387580400,\u6dfb\u52a0\u8bb0\u5f55]}{status:1,bkmsg:\u6210\u529f,bkdata:[\u5415\u5c1a\u5fd7,1387580400,\u6dfb\u52a0\u8bb0\u5f55]},{status:1,bkmsg:\u6210\u529f,bkdata:[\u5415\u5c1a\u5fd7,1387580400,\u4ec0\u4e48\u4e5f\u6ca1\u6709]} ajax请求: $.ajax({ url: /path/to/file, type: GET, dataType: json, data: {param1: value1}, success: function (obj){ //遍历obj } }) 返回的内容在success的函数里面,所有的遍历操作都是……

  • jQuery与JSONP实现跨域访问的实例方法
  • 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成跨域访问的工作,然后在浏览……

    jQuery表单转化JSON对象 相关电子书
    学习笔记
    网友NO.456389

    Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在

    1.jquery grep()筛选遍历数组(可以得到反转的数组) // 1.jquery grep()筛选遍历数组(可以得到反转的数组) var array = [1,5,9,3,12,4,48,98,4,75,2,10,11]; var filterArray = $.grep(array,(currentValue) = { return currentValue 10; }); console.log(`${filterArray}---${filterArray.length}`);//12,48,98,75,11---5 var filterReverse = $.grep(array,(currentValue) = { return currentValue 10; },true); console.log(`${filterReverse}---${filterReverse.length}`);//1,5,9,3,4,4,2,10---8 // for(var i=0;ifilterArray.length;i++){ // console.log(filterArray[i]); // } for(key in filterArray){ console.log(filterArray[key]) } 2.filter()筛选遍历数组(与grep()不同的是调用者不同,参数不同) var ages = [32, 33, 16, 40, 45, 98, 12, 35, 8,16]; var filterAges = ages.filter((currentValue,index,ages) = { return currentValue 20; }) console.log(filterAges);//[32, 33, 40, 45, 98, 35] for(key in filterAges){ console.log(filterAges[key]) } 3.jquery each()筛选遍历数组(主要用来遍……

    网友NO.193705

    jQuery.parseJSON(json)将JSON字符串转换成js对象

    概述 接受一个JSON字符串,返回解析后的对象。 传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串: {test: 1} ( test 没有包围双引号) {'test': 1} (使用了单引号而不是双引号) 另外,如果你什么都不传入,或者一个空字符串、null或undefined,parseJSON都会返回 null 。 参数 jsonString 要解析的JSON字符串 示例 描述: 解析一个JSON字符串 jQuery 代码: var str = '{"name":"John"}';var obj = jQuery.parseJSON(str); alert( obj.name === "John" ); ……

    网友NO.276373

    jQuery把表单元素变为json对象

    (function($){ $.fn.serializeObject=function(){ var inputs=$(this).find("input,textarea,select"); var o = {}; $.each(inputs,function(i,n){ switch(n.nodeName.toUpperCase()){ case "INPUT": if($(n).is(":checkbox")){ if($(n).is(":checked")){ o[n.name]=true; }else{ o[n.name]=false; } }else if($(n).is(":radio")){ if($(n).is(":checked")){ o[n.name]=n.value; } }else{ o[n.name]=n.value; } break; case "TEXTAREA": o[n.name]=$(n).text(); break; case "SELECT": o[n.name]=n.value; break; } }); return o; } })(jQuery); ……

    网友NO.254449

    jQuery实现form表单序列化转换为json对象功能示例

    本文实例讲述了jQuery实现form表单序列化转换为json对象功能。分享给大家供大家参考,具体如下: 做web前端开发时,需要ajax提交大量表单数据,如果一个个form字段拼接很费劲也容易出错,下面方法可解决这个问题 !DOCTYPE htmlhtml head meta charset="utf-8" / titlejquery form序列化转换为json对象/title script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"/script /script /head body form action="" name="post_form" id="post_form" 姓名:input type="name" name="name" value="王" br/性别:input type="radio" name="sex" value="男" checked男input type="radio" name="sex" value="女"女 br/爱好:input type="checkbox" name="loves" value="篮球" 篮球input type="checkbox" name="loves" value="足球"足球 br/籍贯:select name="province" option value="上海"上海/option option value="北京"北京/option option value="深圳"深圳/option /select /form div id="result" /div div button id="send"发送/butt……

    网友NO.645122

    jQuery中json对象的复制方式介绍(数组及对象)

    1、jQuery自带的$.map方式 $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢失了,后来发现了第二种方法。 2、深复制与浅复制 // 浅层复制(只复制顶层的非 object 元素) var newObject = jQuery.extend({}, oldObject); // 深层复制(一层一层往下复制直到最底层) var newObject = jQuery.extend(true, {}, oldObject); 用的是深复制的方式,复制对象时发现字段丢失的现象没有了。 3、数组的过滤 找了一下javascript的数组的方法,没有过滤的方法,后来发现jQuery有提供,尝试了一下,居然很好用。 $.grep(jsonTmp, function (item) { return item.LegendTitle == field; }, false); function的内容根据实际的需要写就可以了,不行的话参考jQuery的帮助,那里说的很详细。 4、顺便说一下数组的排序 json2.sort(function (a, b) { return a["requiredColumn"][……

    <
    1
    >

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757