ajax json 显示数据

来源：互联网发布：linux 内核调试kgd 编辑：程序博客网时间：2024/05/29 15:26

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Ajax&JQuery</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
function GetTable()
{
    $.getJSON
    (
        "jsontable.txt",
        function(json)
        {
     var str="<table><tr><td>name</td><td>age</td><td>删除</td></tr>";
     for(var i=0;i<json.length;i++)
     {
  str+="<tr><td>"+json[i].name+"</td><td>"+json[i].age+"</td><td><input type='button' value='删除' /></td></tr>";
     }
     str+="</table>";
     $("#dv").html(str);
        }
    );
}
function GetTableEach()
{
    $.getJSON
    (
        "jsontable.txt",
        function(json)
        {
    var str="<table><tr><td>name</td><td>age</td><td>删除</td></tr>";
    $.each
    (
       json, function(i, n)
       {
  str+="<tr><td>"+n.name+"</td><td>"+n.age+"</td><td><input type='button' value='删除' /></td></tr>";
       }
    );
    str+="</table>";
    $("#dv_each").html(str);
        }
    );
}
function GetProperty()
{
    $.getJSON
    (
        "json.txt",
        function(json)
        {
    $("#telephone")[0].value=json.telephone;
    $("#address")[0].value=json.address;
        }
    );
}
</script>
</head>
<body>
    <br />
    <br />
    <input type='button' value='获取表格(循环)' onclick="GetTable()" />
    <br />
    <br />
    <br />
    <div id="dv"></div>
    <br />
    <br />
    <br />
    <input type='button' value='获取属性' onclick="GetProperty()" />
    <br />
    <br />
    <input type="text" id="telephone" />
    <input type="text" id="address" />
    <br />
    <br />
    <br />
    <input type='button' value='获取表格(不循环)' onclick="GetTableEach()" />
    <br />
    <br />
    <br />
    <div id="dv_each"></div>
    <br />
    <br />
</body>
</html>

jsontable.txt

[{name:'liudong',age:27},{name:'liuxin',age:26},{name:'zhangjian',age:25},{name:'daxian',age:24}]

json.txt

{'telephone':'13026890621','address':'guangzhou'}