logo标签列表

使用jQuery AJAX加载JSON数据

javascriptjqueryajaxjson
3
我需要在点击按钮时打印这些信息并按日期排序，到目前为止我有以下代码：我有一个JSON文件，看起来像这样，但是我还没有能够将它打印到页面上，也没有进行日期排序。我不确定问题是我使用的ajax版本链接还是其他问题，因为我在YouTube上看到了一个与此完全相同的示例，它可以正常工作。
  [
{
    "users": [
        {
            "name": "user1",
            "Endorsement": "some comment",
            "date": "8/11/2012"
        },
        {
            "name": "user2",
            "Endorsement": "some comment2",
            "date": "9/27/11"
        },
        {
            "name": "user3",
            "Endorsement": "some comment3"
        },
        {
            "name": "user4",
            "Endorsement": "some comment4",
            "date": "4/2/13"
        },
        {
            "name": "user5",
            "Endorsement": "some comment5"
        },
        {
            "name": "user6",
            "Endorsement": "some comment6",
            "date": "3/17/13"
        },
        {
            "name": "user7",
            "Endorsement": "some comment7",
            "date": "5/22/13"
        },
        {
            "name": "user8",
            "Endorsement": "some comment8",
            "date": "9/27/13"
        }
    ]
}

HTML已更新:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
    <link rel="shortcut icon" href="stridesFavicon.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="shortcut icon" href='http://sites.google.com/site/lowcoupling/favicon_16x16.ico' />

</head>
<body>
    <!--Body content-->

  <div id='Div1'>


    <a href="#" id="clickme">Get JSON Data</a>


    </div>


    <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script src="myscript.js" type="text/javascript" /></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });  
    </script>
</body>
</html>

JS updated:

$("#clickme").click(function () {

$.getJSON("users.json", function (data) {

    var items = [];
    $.each(data, function (key, dvalue) {


        $.each(dvalue, function (key, value) {
            items.push('<li id="' + key + '">' + value + '</li>');

        });
    });

    $('<ul/>', {
        'class': 'interest-list',
        html: items.join('')

    }).appendTo('body');

});

});

但是它没有起作用。也就是说，它无法加载用户名；相反，每次我单击该链接时，它会打印出像这样的内容：

• [object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]

print( uneval(json) ); - adeneo
<script src="myscript.js" type="text/javascript"></script> 需要一个闭合标签，脚本标签不能是自闭合的。 - Kevin B
此外，您的页面上没有 ul 元素来附加 li 元素。 - Kevin B
还要检查浏览器的控制台以查找错误。 - The Alpha
还要确保将此代码放在 document.ready 事件内部。 - The Alpha
5个回答
3

这个JSON缺少逗号，除了最后一个元素之外，每行都应该以逗号结尾：

[
    {
        "users": [
            {
                "name": "user1",
                "Endorsement": "some comment",
                "date": "8/11/2012"
            },
            {
                "name": "user2",
                "Endorsement": "some comment2",
                "date": "9/27/11"
            },
            {
                "name": "user3",
                "Endorsement": "some comment3"
            },
            {
                "name": "user4",
                "Endorsement": "some comment4",
                "date": "4/2/13"
            },
            {
                "name": "user5",
                "Endorsement": "some comment5"
            },
            {
                "name": "user6",
                "Endorsement": "some comment6",
                "date": "3/17/13"
            },
            {
                "name": "user7",
                "Endorsement": "some comment7",
                "date": "5/22/13"
            },
            {
                "name": "user8",
                "Endorsement": "some comment8",
                "date": "9/27/3"
            }
        ]
    }
]
2

尝试吧！

$("button").click(function () {

$.getJSON("users.json", function (obj) {


    $.each(obj.users, function (key, value) {
        $("ul").append("<li>" + value.name + "</li>");

    });

});

如果出现错误，请使用浏览器中的调试控制台，可以创建一个fiddle或者记录下错误信息。另外，在你的html中好像没有ul元素。

});

谢谢，我添加了ul标签，但它仍然没有加载任何内容；它也没有显示任何错误。 - Albert Viglieri
我修复了Jason，但再次运行时出现了以下消息SCRIPT5007：无法获取未定义或空引用的属性“length”jquery.min.js，第4行字符5189。 - Albert Viglieri
0

JSON格式不正确。我使用http://jsonlint.com/ 进行了验证，结果显示在第6行出现了错误。您在下面的部分中留下了一个逗号：

"Endorsement": "some comment"  
               "date":"8/11/2012"

这是第一个认可日期对

0
$("button").click(function () {

$.getJSON("users.json", function (data) {



for (i in data)
{

for (k in data[i]) {
               alert(data[i][k]);
            }


});

});
0
$.ajax({
    type:'POST',
   url:'Default.aspx/GetPro',
  data:"{Pid:'"+ faram+"'}",
 contentType: 'application/json; charset=utf-8',
  dataType: 'json',
 async: true,
cache: false,

success: function(msg) {
 alert("{Pid:'"+ faram+"'}");
var orders =msg;
 if (orders.length > 0) {
test(orders);
   }
 else {
  alert("No Record Found");
   }
 },
error: function(xhr, textStatus, errorThrown) {
            alert(xhr.status);
              alert(errorThrown);
              alert(xhr.responseText);
        }

});

function test(data)
{

for (i in data)
          {
//ProductName Is Property Field Of c# Object
 alert(data[i]['ProductName'])
}



 }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接