js完毕将json数组展现前台table中,通过组织AJAX参

时间:2019-07-27 03:07来源:2020欧洲杯冠军竞猜官方网站
!DOCTYPE HTML html head titletest1/title /head body script var arr={ "name":"zhansan", "age":23, "address":{ "city":"beijing", "gas":{ "gasSheet":"气态流出物月报", "H_adjust":1 }, "time":{ "duration":31 } }, "units":{"title":"functio
<!DOCTYPE HTML> 
<html> 
<head> 
<title>test1</title> 
</head> 
<body> 
<script> 
var arr={ 
"name":"zhansan", 
"age":23, 
"address":{ 
"city":"beijing", 
"gas":{ 
"gasSheet":"气态流出物月报", 
"H_adjust":1 
}, 
"time":{ 
"duration":31 
} 
}, 
"units":{"title":"function"} 
} 
function show(obj){ 
var tmp={}; 
for(var i in obj){ 
if(obj[i]=="object"){ 
tmp[i]=show(obj[i]); 
} 
else{ 
tmp[i]=obj[i] 
} 
} 
return tmp; 
} 

var result=show(arr); 
console.log(result); 

</script> 
</body> 
</html>


</pre><p></p><p>利用递归思想,其中注意赋值语句</p><p>可用于不同的环境</p><p></p><pre>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

您可能感兴趣的文章:

  • JS简单循环遍历json数组的方法
  • js实现将json数组显示前台table中
  • JS实现给json数组动态赋值的方法示例
  • js 获取json数组里面数组的长度实例
  • 用javascript对一个json数组深度赋值示例
  • js对象转json数组的简单实现案例
  • JS实现的JSON数组去重算法示例
  • JS实现键值对遍历json数组功能示例
  • JavaScript实现构造json数组的方法分析

您可能感兴趣的文章:

  • JS简单循环遍历json数组的方法
  • js实现将json数组显示前台table中
  • JS实现给json数组动态赋值的方法示例
  • js 获取json数组里面数组的长度实例
  • js对象转json数组的简单实现案例
  • JS实现的JSON数组去重算法示例
  • JS实现键值对遍历json数组功能示例
  • 通过构造AJAX参数实现表单元素JSON相互转换
  • JavaScript实现构造json数组的方法分析

您可能感兴趣的文章:

  • JS简单循环遍历json数组的方法
  • JS实现给json数组动态赋值的方法示例
  • js 获取json数组里面数组的长度实例
  • 用javascript对一个json数组深度赋值示例
  • js对象转json数组的简单实现案例
  • JS实现的JSON数组去重算法示例
  • JS实现键值对遍历json数组功能示例
  • 通过构造AJAX参数实现表单元素JSON相互转换
  • JavaScript实现构造json数组的方法分析
var thing = {plugin: 'jquery-json', version: 2.3};
var encoded = $.toJSON( thing );
// '{"plugin":"jquery-json","version":2.3}'
var name = $.evalJSON( encoded ).plugin;
// "jquery-json"
var version = $.evalJSON(encoded).version;
// 2.3 

2、前台HTML代码

可以利用jquery-json插件实现转换,直接引用示例

<div>
 <!-- 显示后台数据的表格 -->
 <table id="mainTable" class="display hover" border="1">
 <thead>
 <tr>
 <th>用户编号</th>
 <th>用户名称</th>
 <th>用户密码</th>
 <th>手机号码</th>
 <th>部门名称</th>
 <th width="10%">操作</th>
 </tr>
 </thead>
 <tbody id="tbody">
 <tr id="content" class="example">
 <td id="UserCode">2</td>
 <td id="UserName">2</td>
 <td id="UserPwd">2</td>
 <td id="Bmmc">2</td>
 <td id="Phone">2</td>
 </tr>
 </tbody>
 </table>
 </div>
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var obj = $('form').serializeObject();
/*obj: Object
UserId: "UserId1"
UserName: "UserName1"
__proto__: Object*/ 

1、前台JS代码(使用之前引入JQuery的js库文件)

4. 表单元素转JSON

在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题。具体的代码如下:

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" ); 
$.ajax({
 type: "GET",
 url: "UserList.ashx?Action=List",//利用ajax请求后台的并返回值
 // data: "json",
 success: function (result) {//result为后台返回的值,是json字符串的形式
 // alert(result);
 var obj = JSON.parse(result);//解析json字符串为json对象形式
 var trStr = '';//动态拼接table
 // var html = '';
 for (var i = 0; i < obj.length; i  ) {//循环遍历出json对象中的每一个数据并显示在对应的td中
 trStr  = '<tr class="example">';//拼接处规范的表格形式
 trStr  = '<td width="15%" style="display:none" id="user">'   obj[i].NVFID   '</td>';//数据表的主键值
 trStr  = '<td width="15%">'   obj[i].USERCODE   '</td>';//对应数组表的字段值
 trStr  = '<td width="15%">'   obj[i].USERNAME   '</td>';
 trStr  = '<td width="15%">'   obj[i].USERPWD   '</td>';
 trStr  = '<td>'   obj[i].PHONEIMEI   '</td>';
 trStr  = '<td>'   obj[i].BMMC   '</td>';
 /*经典之处,要将主键对应的值以json的形式进行传递,才能在后台使用*/
 trStr  = "<td><a href='#'style='text-decoration:none' onclick='Delete(""   obj[i].NVFID   "")'>删除</a><td>";
 trStr  = '</tr>';  
 } 
 $("#tbody").html(trStr);//运用html方法将拼接的table添加到tbody中return;
 },
 error: function (error) {
 alert(error);
 }
 });
data = {
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Contact":"Phone"
} 
$('div#data').loadJSON(data);
<div id="data">
<h1 id="Name">Emkay Entertainments</h1>
<label for="Address">Address:</label>
Nobel House, Regent Centre 
<label for="Contact">Contact by:</label>
Phone
</div> 

前提:利用ajax获取过来的JSON字符串必须是规范的,这样才能解析正确。后台获取数据库中数据的代码省略了

HTML:

$.getJSON('url_to_file', function(data) {
for (var i in data) {
$('input[name="' i '"]').val(data[i]);
}
}

2.字符串, JSON 互相转换

5. JSON2FORM

<form id="fm" name="fm" action="">
<input name="UserName" type="text" value="UserName1"/>
</form>
<input name="UserId" id="UserId" type="text" value="UserId1"/> 

Google过程中发现一个更强大的插件

3.表单,元素转Name,Value数组

ajax提交服务器数据, 整理一下转换方法。

1.表单元素转QueryString

var arr = $("#fm,#UserId").serializeArray();
/*[ 
{name: 'UserName', value: '"UserName"1'}, 
{name: 'UserId', value: 'UserId'}
] */ 
var q = $('#fm,#UserId').serialize(); //q = UserName=UserName1&UserId=UserId1 

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:js完毕将json数组展现前台table中,通过组织AJAX参

关键词: 欧洲杯竞猜