JSON.parse()【从一个字符串中解析出json对象】
例子:
//定义一个字符串
var data='{"name":"goatling"}'
//解析对象
JSON.parse(data)
结果是:
name:"goatling"
JSON.stringify()【从一个对象中解析出字符串】
var data={name:'goatling'}
JSON.stringify(data)
结果是:
'{"name":"goatling"}'
JSON可以有两种格式,一种是对象格式的,另一种是数组对象,
{"name":"JSON","address":"北京市西城区","age":25}//JSON的对象格式的字符串
[{"name":"JSON","address":"北京市西城区","age":25}]//数据对象格式
从上面的两种格式可以看出对象格式和数组对象格式唯一的不同则是在对象格式的基础上加上了[],再来看具体的结构,可以看出都是以键值对的形式出现的,中间以英文状态下的逗号(,)分隔。
=============================示例=========================================
1、同时保存多行数据(此处忽略重复校验)
1 $("#submitBtn").click(function(){ 2 var flag = true; 3 var eachflag = true; 4 var len = $(".restTable tbody").find("tr").length; 5 var arr = new Array(); 6 if(len != 0){ 7 var trindex = 0; 8 $(".financialTable tbody tr").each(function(){ 9 if(!eachflag){ 10 return; 11 } 12 trindex++; 13 var chargeuser = new Object(); 14 if($(this).find(".name").val().trim()==''){ 15 layer.tips("请填写主要负责人姓名", $(".financialTable #tr_"+trindex+" .name"),{time:1000}); 16 flag = false; 17 eachflag = false; 18 return ; 19 }else{ 20 chargeuser.join_user = $(this).find(".name").val().trim(); 21 } 22 if($.trim($(this).find(".sex").val())==''){ 23 layer.tips("请选择主要负责人性别!", $(".financialTable #tr_"+trindex+" .sex"),{time:1000}); 24 flag = false; 25 eachflag = false; 26 return; 27 }else{ 28 chargeuser.sex = $(this).find(".sex").val()=="男"?0:1; 29 } 30 if($.trim($(this).find(".phone").val())==''){ 31 layer.tips("请填写主要负责人电话", $(".financialTable #tr_"+trindex+" .phone"),{time:1000}); 32 flag = false; 33 eachflag = false; 34 return; 35 }else{ 36 if(! (/^1[3|4|5|7|8|9][0-9]d{8}$/.test($(this).find(".phone").val().trim()))){ 37 layer.tips("请输入正确的电话", $(".financialTable #tr_"+trindex+" .phone"),{time:1000}); 38 flag = false; 39 eachflag = false; 40 return; 41 }else{ 42 chargeuser.phone = $(this).find(".phone").val().trim(); 43 } 44 } 45 //身份证非必输项 46 if($(this).find(".card").val().trim() !=''){ 47 var reg = /(^d{18}$)|(^d{17}(d|X|x)$)/; 48 if (!reg.test($(this).find(".card").val().trim())) { 49 layer.tips("请输入正确的身份证号码", $(".financialTable #tr_"+trindex+" .card"),{time:1000}); 50 flag = false; 51 eachflag = false; 52 return; 53 } 54 } 55 56 var id_card; 57 if($(this).find(".card").val().trim() == ''){ 58 chargeuser.id_card = id_card; 59 }else{ 60 chargeuser.id_card = $(this).find(".card").val().trim(); 61 } 62 var postal_address; 63 if($(this).find(".address").val().trim() == ''){ 64 chargeuser.postal_address = postal_address; 65 }else{ 66 chargeuser.postal_address = $(this).find(".address").val().trim(); 67 } 68 //chargeuser.memo = $(this).find(".memo").val().trim(); 69 var memo; 70 if($(this).find(".memo").val().trim() == ''){ 71 chargeuser.memo = memo; 72 }else{ 73 chargeuser.memo = $(this).find(".memo").val().trim(); 74 } 75 chargeuser.pk_project_vendor = pk; 76 arr.push(chargeuser) 77 }) 78 } 79 if(!flag){ 80 return; 81 } 82 $.ajax({ 83 url:"${ctp}/basic_project/vendor/chargeuser.json", 84 type:"post", 85 dataType:"json", 86 data:{'arr':JSON.stringify(arr),/*JSON.stringify()用于将jascript值(对象或数组)转为json字符串:var str = '{"name":"菜鸟教程",。。。}'*/ 87 'pk_project_vendor':pk, 88 'uuid':uuid, 89 'pkold':pkold 90 }, 91 async:false, 92 traditional: true, 93 success:function(result){ 94 if(result.success){ 95 layer.msg(result.msg, {time : 1000}, function() { 96 top.layer.close(layerIndex); 97 }); 98 }else{ 99 layer.alert(result.msg,{shift:2,closeBtn:false},function() { 100 top.layer.close(layerIndex); 101 }); 102 } 103 flag = true; 104 eachflag = true; 105 } 106 }) 107 })
注意点:构造的Array数组必须转成Json格式再传到后台
JSON.stringify(arr)处理后的格式: [ {"join_user":"1","sex":0,"phone":"18634533432","pk_project_vendor":""}, {"join_user":"2","sex":1,"phone":"18634533432","pk_project_vendor":""} ]
后台接收的都是String字符串,需经过JSONArray.parseArray(String, Clasz)处理转成list: String str = request.getParameter("arr"); List<ProjectChargeuserVO> list = JSONArray.parseArray(str, ProjectChargeuserVO.class);
2、数字校验(项目中用于校验金额的):任意正整数,正小数(小数位不超过2位)
1 //金额非必输项 2 if($(this).find(".mny").val().trim() !=''){ 3 var reg = /^(([1-9][0-9]*)|(([0].d{1,2}|[1-9][0-9]*.d{1,2})))$/; 4 if (!reg.test($(this).find(".mny").val().trim())) { 5 layer.tips("请输入正确的金额", $(".financialTable #tr_"+trindex+" .mny"),{time:1000}); 6 flag = false; 7 eachflag = false; 8 return; 9 } 10 }
页面显示金额(3位小数)
1 <td class="c_liuct txtc"> 2 <span class="apostrophe" title="<fmt:formatNumber type='number' value='${vendor.reg_mny}' pattern='#,##0.000' maxFractionDigits='3'/>"> 3 <fmt:formatNumber type="number" value="${vendor.reg_mny}" pattern="#,##0.000" maxFractionDigits="3"/> 4 </span> 5 </td>