使用jquery中的getJSON函数获取json文件中的内容并输出到页面上和使用 AJAX处理JSON文件

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax显示JSON内容</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div style="margin-top:100px;">
        <div style="width:800px;height:40px;border:1px solid red;display: block;margin:0 auto;text-align: center" >标题 :<span id="tit"></span>
        </div>
        <div style="width:800px;height:600px;border:1px solid red;display: block;margin:0 auto;">内容 :</br>
            <span id="con"></span>
        </div>
        <button id="getContent1" style="margin:0 auto;margin-top:30px;display: block;">获取JSON文件内容</button>
        <button id="getContent2" style="margin:0 auto;margin-top:30px;display: block;">获取JSON文件内容</button>
        <button id="getContent3" style="margin:0 auto;margin-top:30px;display: block;">获取JSON文件内容</button>

    </div>

    <a href="test.php?act=0" name="title1" id="content1">JSON1</a>
    <a href="test.php?act=1" name="title2" id="content2">JSON2</a>
    <a href="test.php?act=2" name="title3" id="content3">JSON3</a>

    <script>
       $("#getContent1").click(function(){$.getJSON("file.json",function(json){$("#tit").text(json.sites[0].title);
               $("#con").text(json.sites[0].content);
           });
       })$("#getContent2").click(function(){$.getJSON("file.json",function(json){$("#tit").text(json.sites[1].title);
               $("#con").text(json.sites[1].content);
           });
       })$("#getContent3").click(function(){$.getJSON("file.json",function(json){$("#tit").text(json.sites[2].title);
               $("#con").text(json.sites[2].content);
           });
       })</script>

</body>
</html>

php代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax显示JSON内容</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div style="margin-top:100px;">
    <div style="width:800px;height:40px;border:1px solid blue;display: block;margin:0 auto;text-align: center" >标题 :<span id="tit"></span>
    </div>
    <div style="width:800px;height:600px;border:1px solid blue;display: block;margin:0 auto;">内容 :</br>
        <span id="con"></span>
    </div>
</div>

<script>
    $.getJSON("file.json",function(json){$("#tit").text(json.sites[<?php
                print_r($_GET["act"]);
            ?>].title);
        $("#con").text(json.sites[<?php
                print_r($_GET["act"]);
            ?>].content);
    });
</script>
</body>
</html>

file.json文件

{"sites": [{ "title":"JSON文件标题1" , "content":"JSON文件内容  JSON文件内容1 " },
    { "title":"JSON文件标题2" , "content":"JSON文件内容  JSON文件内容2 " },
    { "title":"JSON文件标题3" , "content":"JSON文件内容  JSON文件内容3 " }]
}

使用AJAX获取到JSON文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <div id="wp"></div>
    <script>
        $.ajax({type: "GET",
            url: "inde.json",
            dataType: "json",
            success: function(msg){alert(msg.德莱文.name)}});
    </script>
</body>
</html>

{"德莱文": { "name":"德莱文" , "age":20},
  "武器大师": { "name":"武器大师" , "age":"30" },
  "暴走萝莉": { "name":"德莱文" , "age":20},
  "剑圣": { "name":"武器大师" , "age":"30" },
  "龙龟": { "name":"德莱文" , "age":20},
  "机器人": { "name":"武器大师" , "age":"30" },
  "德拉斯": { "name":"德莱文" , "age":20},
  "尼古拉斯": { "name":"武器大师" , "age":"30" }
}

使用jquery中的getJSON函数获取json文件中的内容并输出到页面上和使用 AJAX处理JSON文件相关推荐

numpy使用np.argmax函数获取一维数组中最大值所在的索引(index of largest value in numpy array with np.argmax)
numpy使用np.argmax函数获取一维数组中最大值所在的索引(index of largest value in numpy array with np.argmax) 目录 numpy使用np ...
R语言sys方法：sys.info函数获取系统和用户信息、sys.localeConv函数获取当前区域中的数字和货币表示的详细信息、sys.setFileTime函数更改文件的时间
R语言sys方法:sys.info函数获取系统和用户信息.sys.localeConv函数获取当前区域中的数字和货币表示的详细信息.sys.setFileTime函数更改文件的时间目录
pandas使用groupby.first函数、groupby.nth(0)函数获取每个组中的第一个值实战：groupby.first函数和groupby.nth函数对比(对待NaN的差异)
pandas使用groupby.first函数.groupby.nth(0)函数获取每个组中的第一个值实战:groupby.first函数和groupby.nth函数对比(对待NaN的差异) 目录
pandas使用groupby.last函数获取每个组中的最后一个值实战：groupby.last函数获取每个组中的最后一个值、groupby.nth函数获取每个组中的最后一个值
pandas使用groupby.last函数获取每个组中的最后一个值实战:groupby.last函数获取每个组中的最后一个值.groupby.nth函数获取每个组中的最后一个值目录
python input与返回值-python中使用input()函数获取用户输入值方式
我们编写程序最终目的还是来解决实际问题,所以必然会遇到输入输出的交互问题,python中提供了input函数用来获取用户的输入,我们可以用以下程序演示. user_gender = input(&qu ...
mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度
这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题最近在开发一个Vue的项 ...
c语言读取文件字节数,怎么在C语言中利用fstat函数获取文件的大小
怎么在C语言中利用fstat函数获取文件的大小发布时间:2021-01-22 17:03:17 来源:亿速云阅读:110 作者:Leah 怎么在C语言中利用fstat函数获取文件的大小?针对这个问 ...
R语言描述性统计分析：使用epiDisplay包的summ函数获取dataframe数据中每个变量的常用统计量、对每个变量进行汇总统计
R语言描述性统计分析:使用epiDisplay包的summ函数获取dataframe数据中每个变量的常用统计量.对每个变量进行汇总统计目录
MYSQL中的REPLACE函数，以及Hive中的regexp_replace的用法
MYSQL中的REPLACE函数,以及Hive中的regexp_replace的用法一.repacle是什么? 二.使用步骤 1.实践是检验真理的唯一标准 2.Hive中的替换函数regexp_re ...

使用jquery中的getJSON函数获取json文件中的内容并输出到页面上和使用 AJAX处理JSON文件

使用jquery中的getJSON函数获取json文件中的内容并输出到页面上和使用 AJAX处理JSON文件相关推荐

最新文章

热门文章