JSON在线解析

所属目录
点击了解高性能代码运行API
运行结果
教程手册
代码仓库
极速运行
交互输入
极速运行模式,更高效的运行,点击编辑器上方的运行按钮即刻体验吧。
以下是用户最新保存的代码
我带会员单位岁啊哈幅度缺乏撒网缺乏v 发布于:2022-09-27 08:28 环保token 发布于:2022-05-12 21:12 流水线的保存的json数据,把里面所有的job的几个信息摘出来,取出每个job的jobName、jobType、categoryId、realJob 内容。 发布于:2022-04-22 19:17 爱上CAD 发布于:2022-02-17 23:03 中国省市区 json 发布于:2021-10-15 13:39 供应商带出币种 发布于:2021-07-23 10:19 拉取采购收货 发布于:2021-07-13 16:14 解析IP地址 发布于:2021-04-12 20:45 OA --> CMDB_DCOS的北向数据 发布于:2021-02-02 15:00 测试json 是否正确 发布于:2021-01-13 11:06 python题库 发布于:2021-01-06 10:31 json 解析 发布于:2020-10-18 15:05 电池图所需数据 发布于:2020-10-08 18:32 新price_bar2 发布于:2020-09-28 09:51 新price_bar 发布于:2020-09-28 15:05 电池图所需数据 发布于:2020-09-20 13:57 电池图所需数据 发布于:2020-09-20 13:57 JSON在线解析,JSON格式化 发布于:2020-09-16 12:10 电池图所需数据 发布于:2020-09-02 11:35 电池图所需数据 发布于:2020-08-25 17:50 建立一个mock测试 json 数据。 发布于:2020-08-22 10:32 地理缩写对照 发布于:2020-07-08 13:28 v2ray-config 发布于:2021-05-11 13:03 JSON在线解析,JSON格式化 发布于:2020-06-20 15:04 [更多]
显示目录

JSON 与 Ajax



JSON 与 Ajax

AJAX 就是异步 JavaScript 和 XML,它是一组用于客户端的相互关联的 Web 开发技术,以创建异步 Web 应用程序。

遵循 AJAX 模型,Web 应用程序可以以异步的方式发送数据以及从服务器上检索数据,而不影响现有页面的显示行为。

许多开发人员都在客户端和服务器之间使用 JSON 传递 AJAX 更新。实时更新体育成绩的站点就可以视为一个 AJAX 例子。

如果这些成绩要更新到站点上,那么必须要把它们存储到服务器上便于需要时网页能取回这些成绩。这里我们可以使用 JSON 格式的数据。

任何使用 AJAX 更新的数据都可以使用 JSON 格式存储在 Web 服务器上。

使用 AJAX,那么 JavaScript 就可以在必要时取回这些 JSON 文件,解析它们,然后做以下两件事情:

  • 把它们显示到网页上之前将解析的值存储到变量中便于进一步处理。
  • 直接分配数据给网页中的 DOM 元素,那么它就会显示在站点上。

示例

下面的代码展示了 JSON 和 AJAX,请把它们保存为 ajax.htm 文件。这里的加载函数 loadJSON() 将会使用异步的方式上传 JSON 数据。

<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
    var data_file = "http://www.tutorialspoint.com/json/data.json";
    var http_request = new XMLHttpRequest();
    try{
        // Opera 8.0+, Firefox, Chrome, Safari
        http_request = new XMLHttpRequest();
    }catch (e){
        // IE 浏览器处理
        try{
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // 错误处理
                alert("Your browser broke!");
                return false;
            }
        }
    }
    http_request.onreadystatechange = function(){
        if (http_request.readyState == 4 )
        {
            // 使用 JSON.parse 解析 JSON 数据
            var jsonObj = JSON.parse(http_request.responseText);
            // jsonObj 变量现在包含数组结构,可以通过 jsonObj.name 和 jsonObj.country 的方式访问
            document.getElementById("Name").innerHTML = jsonObj.name;
            document.getElementById("Country").innerHTML = jsonObj.country;
        }
    }
    http_request.open("GET", data_file, true);
    http_request.send();
}
</script>
<title>tutorialspoint.com JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
<table class="src">
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div id="Name">Sachin</div></td>
<td><div id="Country">India</div></td></tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>

下面就是包含 JSON 格式数据的输入文件 data.json,当点击 Update Detail 按钮时会以异步的方式上传它。这个文件已经保存到 http://www.tutorialspoint.com/json/ 上了。

{"name": "brett", "country": "Australia"}

上面的 HTML 代码会生成如下所示屏幕显示,这里可以进行 AJAX 实战:

Cricketer Details

Name Country
Sachin India
由JSRUN为你提供的JSON在线运行、在线编译工具
        JSRUN提供的JSON 在线运行,JSON 在线运行工具,基于linux操作系统环境提供线上编译和线上运行,具有运行快速,运行结果与常用开发、生产环境保持一致的特点。

title

使用此草稿 删除草稿

  • 00:23
注册登录后可减少验证码的弹出,点击前往 注册 | 登录

皮肤:

运行模式:

嵌入代码 iframe嵌入:


服务器已安装大部分常用的依赖库,但仍会存在一些未被安装的库, 可以通过本窗口立即安装所需依赖库,请确保库名正确,否则无法安装成功。


请输入依赖库的名称:

请选择语言: