ajax json 显示数据

最新推荐文章于 2023-11-27 10:59:49 发布

兵_哥哥

最新推荐文章于 2023-11-27 10:59:49 发布

阅读量771

点赞数

<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='获取表格(循环)' οnclick="GetTable()" />
    <br />
    <br />
    <br />
    <div id="dv"></div>
    <br />
    <br />
    <br />
    <input type='button' value='获取属性' οnclick="GetProperty()" />
    <br />
    <br />
    <input type="text" id="telephone" />
    <input type="text" id="address" />
    <br />
    <br />
    <br />
    <input type='button' value='获取表格(不循环)' οnclick="GetTableEach()" />
    <br />
    <br />
    <br />
    <div id="dv_each"></div>
    <br />
    <br />
</body>
</html>