GVKun编程网logo

如何让一个json文件显示在表格里【实现代码】(将json数据显示在表格里)

9

对于想了解如何让一个json文件显示在表格里【实现代码】的读者,本文将是一篇不可错过的文章,我们将详细介绍将json数据显示在表格里,并且为您提供关于AJAX的原理—如何做到异步和局部刷新【实现代码】

对于想了解如何让一个json文件显示在表格里【实现代码】的读者,本文将是一篇不可错过的文章,我们将详细介绍将json数据显示在表格里,并且为您提供关于AJAX的原理—如何做到异步和局部刷新【实现代码】、AJAX的原理―如何做到异步和局部刷新【实现代码】、C#解析json文件的实现代码、c#通过引用同一个json文件中的另一个值来获取json对象的值的有价值信息。

本文目录一览:

如何让一个json文件显示在表格里【实现代码】(将json数据显示在表格里)

如何让一个json文件显示在表格里【实现代码】(将json数据显示在表格里)

<div>
<prehttps://www.jb51.cc/tag/rush/" target="_blank">rush:xhtml;">

//首先得把架子搭起来 //简单的json内容 var json = {"姓名":"张三","年龄":"26","性别":"男"}; //获取tr var tr = document.getElementsByTagName('tr'); //tr1和tr2下面会用到,但是要先声明,给一个空值 var tr1 = ''; var tr2 = ''; //用for in来进行遍历,k是键,json[k]是值 for(var k in json){ tr1+=''; tr2+='一个tr里 tr[0].innerHTML = tr1; //tr2里放的是值,也就是张三,26,男,把这些信息放到第二个tr里 tr[1].innerHTML = tr2;

以前想着如何才能把json的内容动态放到表格里面呢?

有时候面试会被问到,当然面试时问的是用ajax如何办到。但是我这里就写个简单的demo,现有的json放到表格里。这个demo我做了好几遍,虽然每次放到表格里,但是样子都很古怪,有可能是一个竖排例如这样

姓名

张三

年龄

26

性别

又有可能是这样

姓名

年龄

性别

张三

26

但是我想要的是这样

姓名 年龄 性别

张三 26 男

在经过几次实验之后,发现需要在html骨架结构上做调整,一开始只放table标签是不行的,得加两个tr标签,最后用js把两个tr标签填充,才能达到想要的效果

以上这篇如何让一个json文件显示在表格里【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小编。

总结

以上是小编为你收集整理的如何让一个json文件显示在表格里【实现代码】全部内容。

如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。

表格表格表格

JavaScript相关文章

2022最全最新前端面试题(附加解答)
这是我整理所有看过的文章的面试题+各种百度每一道题的答案,希望可以有效的帮助别人本章博客,梳理所有基础的js,jquery,vue,css, html等题,包含面试题,可供参考学习,也督促自我学习
前端面试八股文(详细版)—上
前端面试八股文,知识点广而全,内容会及时更新
Js运算符
JavaScript 语言的算术运算符是使用数字值作为操作数,进行运算之后返回一个数字值。算术运算符+,-,*,/,%% => 模(余数)
【Vue】webpack的基本使用
好处:前端开发自成体系,有一套标准的开发方案和流量。概念: webpack是前端项目工程化的具体解决方案。主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端JavaScript的兼容性性能优化等强大的功能。好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。注意:目前Vue,React等前端项目,基本上都是基于webpack进行工程化开发的。步骤import和require导入模块的区别1、require对应导出的方法是module.export
Pro3:js实现放大镜效果
JavaScript练习项目第三个:js实现放大镜的效果。
【2022-11-26】JS逆向之北京百姓网
北京百姓网cookie逆向
你评论,我赠书~【TFS-CLUB社区 第9期赠书活动】〖HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)〗等你来拿
你评论,我赠书~【TFS-CLUB社区 第9期赠书活动】〖HTML5+CSS3+JavaScript从入门到精通(微课精编版)〗等你来拿
App逆向案例 X嘟牛 - Frida监听 & WT-JS工具还原(一)
App逆向 X嘟牛 - Frida监听 & WT-JS工具还原(一)
  • • 2022最全最新前端面试题(附加解答)
  • • 前端面试八股文(详细版)—上
  • • Js运算符
  • • 【Vue】webpack的基本使用
  • • Pro3:js实现放大镜效果
  • • 【2022-11-26】JS逆向之北京百姓网
  • • 你评论,我赠书~【TFS-CLUB社区 第9期赠
  • • App逆向案例 X嘟牛 - Frida监听 &
  • • js中的正则表达式入门
  • • JavaScript箭头函数中的this详解
HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-
  • 友情链接:
  • 菜鸟教程
  • 前端之家
  • 编程小课
  • 小编
  • -
  • 我要投稿
  • -
  • 广告合作
  • -
  • 联系我们
  • -
  • 免责声明
  • -
  • 网站地图
版权所有 © 2018 小编 闽ICP备13020303号-8
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜"程序精选"关注
微信扫一扫可直接关注哦!
'+k+'

AJAX的原理—如何做到异步和局部刷新【实现代码】

AJAX的原理—如何做到异步和局部刷新【实现代码】

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的。

详解:

1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(类似于客户端会轮询服务器的返回状态,仍然是http短连接,并非长连接的服务器端push)请求状态,如果一切已经就绪(status=200),那么就执行需要的操作。

操作一般就是直接操作DOM,所以AJAX能做到所谓的“无刷新”用户体验。

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2.  那么在AJAX客户端如何做到的异步呢?实际上就是Javascript的回调函数起的作用

提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行

业务函数:

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback, url);
}
需要异步通讯的函数: 


function executeXhr(callback, url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET", url, true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET", url, true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET", url, true)

第一行定义了JavaScript回调函数,一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明想要异步执行该请求。

一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。

回调函数:

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

以上这篇AJAX的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

您可能感兴趣的文章:
  • JQuery的Ajax请求实现局部刷新的简单实例
  • jQuery+ajax实现局部刷新的两种方法
  • ajax局部刷新一个div下jsp内容的方法
  • jquery ajax 局部刷新小案例
  • ajax局部刷新实例 (三种方法推荐)
  • Ajax实现带有验证码的局部刷新登录界面
  • 纯JS实现AJAX局部刷新功能
  • 利用ajax实现简单的注册验证局部刷新实例
  • Ajax局部刷新应用案例---简单登录
  • Ajax实现局部刷新的方法实例

AJAX的原理―如何做到异步和局部刷新【实现代码】

AJAX的原理―如何做到异步和局部刷新【实现代码】

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的。

详解:

1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(类似于客户端会轮询服务器的返回状态,仍然是http短连接,并非长连接的服务器端push)请求状态,如果一切已经就绪(status=200),那么就执行需要的操作。

操作一般就是直接操作DOM,所以AJAX能做到所谓的“无刷新”用户体验。

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2.  那么在AJAX客户端如何做到的异步呢?实际上就是Javascript的回调函数起的作用

提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行

业务函数:

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback,url);
}
需要异步通讯的函数: 


function executeXhr(callback,url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET",url,true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET",true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET",true)

第一行定义了JavaScript回调函数,一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明想要异步执行该请求。

一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。

回调函数:

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

以上这篇AJAX的原理―如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程小技巧。

C#解析json文件的实现代码

C#解析json文件的实现代码

C# 解析 json

  JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript语法标准的一个子集。 JSON采用完全独立于语言的文本格式,可以很容易在各种网络、平台和程序之间传输。JSON的语法很简单,易于人阅读和编写,同时也易于机器解析和生成。

JSON与XML的比较

◆可读性
  JSON和XML的可读性相比较而言,由于XML提供辅助的标签,更加适合人阅读和理解。
◆文件大小与传输
  XML允许使用方便的标签,所以文件尺寸是要比JSON大的。而且JSON源于Javascript,所以天生的主战场是Javascript与网络,在这里,JSON有着XML无法赶超的优势。

JSON语法

1. JSON 语法是 JavaScript 对象表示法语法的子集。

•数据在名称/值对中:名称是字符串,使用双引号表示。值可以是:数字(整数或浮点数),字符串(在双引号中),数组(在方括号中),对象(在花括号中),true/false/null。
•数据由逗号分隔:
•花括号保存对象:对象可以包含各种数据,包括数组。
•方括号保存数组:数字可以包含对象。

例如:

复制代码 代码如下:

{
    "employees": [
        {
            "firstName": "Bill",
            "lastName": "Gates"
        },
        {
            "firstName": "George",
            "lastName": "Bush"
        }
    ]
}

2. 如果JSON中含有转义字符,则需要转义。例如文件路径中需要使用"\\"而不是"\"。例如:{ "file":"C:\\a.txt"}。

.NET操作JSON

  JSON文件读入到内存中就是字符串,.NET操作JSON就是生成与解析JSON字符串。操作JSON通常有以下几种方式:

1. 原始方式:自己按照JSON的语法格式,写代码直接操作JSON字符串。如非必要,应该很少人会走这条路,从头再来的。

2. 通用方式【★★★★★】:

这种方式是使用开源的类库Newtonsoft.Json(下载地址http://json.codeplex.com/)。下载后加入工程就能用。通常可以使用JObject,JsonReader,JsonWriter处理。这种方式最通用,也最灵活,可以随时修改不爽的地方。
(1)使用JsonReader读Json字符串:

复制代码 代码如下:

string jsonText = @"{""input"" : ""value"",""output"" : ""result""}";
JsonReader reader = new JsonTextReader(new StringReader(jsonText));

while (reader.Read())
{
    Console.WriteLine(reader.TokenType + "\t\t" + reader.ValueType + "\t\t" + reader.Value);
}

(2)使用JsonWriter写字符串:

复制代码 代码如下:

StringWriter sw = new StringWriter();
JsonWriter writer = new JsonTextWriter(sw);

writer.WriteStartObject();
writer.WritePropertyName("input");
writer.WriteValue("value");
writer.WritePropertyName("output");
writer.WriteValue("result");
writer.WriteEndobject();
writer.Flush();

string jsonText = sw.GetStringBuilder().ToString();
Console.WriteLine(jsonText);

(3)使用JObject读写字符串:

复制代码 代码如下:

JObject jo = JObject.Parse(jsonText);
string[] values = jo.Properties().Select(item => item.Value.ToString()).ToArray();

(4)使用JsonSerializer读写对象(基于JsonWriter与JsonReader):

数组型数据

复制代码 代码如下:

string jsonArrayText1 = "[{'a':'a1','b':'b1'},{'a':'a2','b':'b2'}]";
JArray ja = (JArray)JsonConvert.DeserializeObject(jsonArrayText1);
string ja1a = ja[1]["a"].ToString();
//或者
JObject o = (JObject)ja[1];
string oa = o["a"].ToString();

嵌套格式

复制代码 代码如下:

string jsonText = "{\"beijing\":{\"zone\":\"海淀\",\"zone_en\":\"haidian\"}}";
JObject jo = (JObject)JsonConvert.DeserializeObject(jsonText);
string zone = jo["beijing"]["zone"].ToString();
string zone_en = jo["beijing"]["zone_en"].ToString();

自定义类Project

复制代码 代码如下:

Project p = new Project() { Input = "stone",Output = "gold" };
JsonSerializer serializer = new JsonSerializer();
StringWriter sw = new StringWriter();
serializer.Serialize(new JsonTextWriter(sw),p);
Console.WriteLine(sw.GetStringBuilder().ToString());

StringReader sr = new StringReader(@"{""Input"":""stone"",""Output"":""gold""}");
Project p1 = (Project)serializer.Deserialize(new JsonTextReader(sr),typeof(Project));
Console.WriteLine(p1.Input + "=>" + p1.Output);

上面的代码都是基于下面这个Project类定义:

复制代码 代码如下:

class Project
{
    public string Input { get; set; }
    public string Output { get; set; }
}

此外,如果上面的JsonTextReader等类编译不过的话,说明是我们自己修改过的类,换成你们自己的相关类就可以了,不影响使用。

3. 内置方式:使用.NET Framework 3.5/4.0中提供的System.Web.Script.Serialization命名空间下的JavaScriptSerializer类进行对象的序列化与反序列化,很直接。

复制代码 代码如下:

Project p = new Project() { Input = "stone",Output = "gold" };
 JavaScriptSerializer serializer = new JavaScriptSerializer();
 var json = serializer.Serialize(p);
 Console.WriteLine(json);

 var p1 = serializer.Deserialize<Project>(json);
 Console.WriteLine(p1.Input + "=>" + p1.Output);
 Console.WriteLine(ReferenceEquals(p,p1));

注意:如果使用的是VS2010,则要求当前的工程的Target Framework要改成.Net Framework 4,不能使用Client Profile。当然这个System.Web.Extensions.dll主要是Web使用的,直接在Console工程中用感觉有点浪费资源。

  此外,从最后一句也可以看到,序列化与反序列化是深拷贝的一种典型的实现方式。

4. 契约方式:使用System.Runtime.Serialization.dll提供的DataContractJsonSerializer或者 JsonReaderWriterFactory实现。

复制代码 代码如下:

Project p = new Project() { Input = "stone",Output = "gold" };
DataContractJsonSerializer serializer = new DataContractJsonSerializer(p.GetType());
string jsonText;

using (MemoryStream stream = new MemoryStream())
{
    serializer.WriteObject(stream,p);
    jsonText = Encoding.UTF8.GetString(stream.ToArray());
    Console.WriteLine(jsonText);
}

using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonText)))
{
    DataContractJsonSerializer serializer1 = new DataContractJsonSerializer(typeof(Project));
    Project p1 = (Project)serializer1.Readobject(ms);
    Console.WriteLine(p1.Input + "=>" + p1.Output);
}

这里要注意,这里的Project类和成员要加相关的Attribute:

复制代码 代码如下:

[DataContract]
class Project
{
    [DataMember]
    public string Input { get; set; }
    [DataMember]
    public string Output { get; set; }
}

实用参考:
JSON验证工具:http://jsonlint.com/
JSON简明教程:http://www.jb51.net/w3school/json/
Newtonsoft.Json类库下载:http://json.codeplex.com/

c#通过引用同一个json文件中的另一个值来获取json对象的值

c#通过引用同一个json文件中的另一个值来获取json对象的值

我的问题是由于我对 jsonutils.com 正确返回的类缺乏了解造成的。它作为类返回:

public class Title
{
    public string en_GB { get; set; }
}

我认为字符串 en_GB 会根据使用的语言环境而改变。但是 en_GB 只是字符串的名称,不会依赖于 JSON 文件中使用的语言环境。解决方法是简单地更改字符串名称:

public class Title
{
    public string name { get; set; }
}

JSON 文件已正确反序列化

"title": {
        "en_GB": "Flavour of Asia"
    }

在 Title.name 中返回值“亚洲风味”

小学生错误...感谢@Steve B 和@Charlieface 的回复

关于如何让一个json文件显示在表格里【实现代码】将json数据显示在表格里的问题我们已经讲解完毕,感谢您的阅读,如果还想了解更多关于AJAX的原理—如何做到异步和局部刷新【实现代码】、AJAX的原理―如何做到异步和局部刷新【实现代码】、C#解析json文件的实现代码、c#通过引用同一个json文件中的另一个值来获取json对象的值等相关内容,可以在本站寻找。

本文标签: