Javascript 使用jqueryajax加载JSON数据_Javascript_Jquery_Ajax_Json

Javascript 使用jqueryajax加载JSON数据

javascript jquery ajax json

Javascript 使用jqueryajax加载JSON数据,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我需要在点击一个按钮并按日期排序时打印这些信息，目前为止我有这样一个：我有一个json文件，看起来像这样，但我无法在页面上打印它，仍然没有按日期排序部分。我不确定问题是否出在我正在使用的ajax版本的链接上，或者问题出在哪里，因为我在youtube上看到了一个类似的示例，它运行得很好 JSON: ] HTML更新： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

我需要在点击一个按钮并按日期排序时打印这些信息，目前为止我有这样一个：我有一个json文件，看起来像这样，但我无法在页面上打印它，仍然没有按日期排序部分。我不确定问题是否出在我正在使用的ajax版本的链接上，或者问题出在哪里，因为我在youtube上看到了一个类似的示例，它运行得很好

JSON:

]

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>


接触
$（文档）.ready（函数（）{
$（'.dropdown toggle'）.dropdown（）；
});

JS更新：

$（“#单击我”）。单击（函数（）{

$.getJSON（“users.json”），函数（数据）{
var项目=[]；
$.each（数据、函数（键、数据值）{
$.each（数据值、函数（键、值）{
items.push（““+value+””）；
});
});
$（“”{
“类”：“兴趣列表”，
html:items.join（“”）
}).附于（“主体”）；
});
});

但它不起作用。意思是不加载用户名；相反，每次单击链接时，它都会打印类似的内容：

•[对象对象]，[对象对象对象]，[对象对象]，[对象对象对象]，[对象对象]，[对象对象]，[对象对象对象]，[对象对象对象]

试试看

$（“按钮”）。单击（函数（）{
$.getJSON（“users.json”，函数（obj）{
$.each（对象用户、功能（键、值）{
$（“ul”）。追加（“”+value.name+””；
});
});

}))

若有错误，则使用浏览器中的调试控制台。

要么拉小提琴，要么写错误。在html中似乎没有ul元素

json无效。我使用验证，第6行显示错误。您在下面的部分中留下了逗号：

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

这是第一个背书日期对

jason缺少一些逗号，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"
            }
        ]
    }
]

}))

print（uneval（json））

需要一个结束标记，脚本标记不能自动结束。此外，您的页面上没有可附加li的

ul

。还要检查浏览器控制台以找出错误。还要确保您将此代码放入

文档中。准备好了

事件。谢谢我添加了ul标记，但它仍然没有加载任何内容；它也没有显示任何错误。我修复了jason，当再次运行它时，我收到以下消息SCRIPT5007:无法获取未定义或空引用jquery.min.js的属性'length'，第4行字符5189

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

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


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

    });

});

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

[
    {
        "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"
            }
        ]
    }
]

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

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



for (i in data)
{

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


});

});

$.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'])
}



 }