Question

我是json和jquery的新手。我试图通过研究一些例子来研究json和jquery的基础知识。所以我在http://api.androidhive.info/contacts中使用现有的json数据作为我的例子。我想在我的HTML页面中显示这些数据。我的代码是：

<html>
<head>
<title>jQuery Ajax Example with JSON Response</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
  $(':submit').on('click', function() { // This event fires when a button is clicked
      alert("submitt worked.");
      $.ajax({ // ajax call starts
      url: 'http://api.androidhive.info/contacts/', // JQuery loads serverside.php
      type: "GET",
      dataType: 'json', // Choosing a JSON datatype
      success: function (msg) {
                alert("ajax worked.");
                JsonpCallback(msg);

    },
    })
    function JsonpCallback(json)
{
  for (var i in json.contacts) {
          $('#wines').append('contacts: ' + json.contacts[i] + '<br/>');
        }

}

    return false; // keeps the page from not refreshing 
  });
});
</script>

</head>

<body>
  <form method="post" action="">
    <button value="all" type="submit">Get!</button>

  </form>

  <div id="wines">
  <!-- Javascript will print data in here when we have finished the page -->
  </div>

</body>
</html>

任何人都可以给我一些关于JSON以及它如何工作的简要介绍吗？

提前致谢。

Answer 1

你正在迭代JSON错误，在你的情况下你使用jQuery（如上所述）你可以使用$ .each（json，callback）; helper fron jQuery，你可以在这里看到文档Jquery $.each documentation

对于示例实现，我创建了此JSFIDDLE LINK 为了你。祝你有个美好的一天。不要忘记JSON意味着

Javascript对象表示法

这是一个对象。

$.each(jsonData.contacts, function(k, v)
{
      console.log(v.name);
      $('#name').append('<li>'+v.name+'</li>');
});

Answer 2

<强>的jQuery

我尝试研究json和jquery的基础知识

是一个包含许多非常有用的方法的Javascript库。如果您想创建一个动态网站，建议您查看jQuery。关于jQuery可以做什么，有很多网站都有很好的解释。就您的示例而言：将变量/数据从一个框架传递到另一个框架或甚至简单地存储数据时都存在问题。这是JSON。

<强> JSON

或JavaScript对象表示法（JSON）用于解决该问题。基本上做的是获取所有期望的数据（数组，变量，对象，字符串等）并将其写入人类可读以及其他框架可读方式。当没有数据库可用或将数据从一个框架传递到另一个框架（如JS＆lt; - ＆gt; PHP）时，我使用JSON将数据存储在文件中。

您的示例代码

这里会发生什么：

$(':submit').on('click', function() { // This event fires when a button is clicked
      alert("submitt worked."); // not yet
      $.ajax({ // ajax call starts
          url: 'http://api.androidhive.info/contacts/', // JQuery loads serverside.php --> this I don't know
          type: "GET", // communication type
          dataType: 'json', // Choosing a JSON datatype
          success: function (msg) { // here, the whole content of the url is read, idealy it is in JSON format ofc
                alert("ajax worked."); // hoorray
                JsonpCallback(msg);
          },
    })

有serverside.php文件接收GET命令并返回 HTML 。所有 HTML 内容都是JSON类型（因此没有<stuff>，即没有实际的HTML），而您的success函数会在msg变量中返回该内容。通常你会使用像

这样的东西

var obj = JSON.parse(text);

将JSON数据转换为Javascript变量。请在此处阅读JSON in Javascript

<强> JSONP

现在如果您想要进行域名交叉（如您所建议的那样），那么我强烈建议您在此处阅读What is JSONP all about?。它解释了JSONP的全部内容

如何使用ajax调用从现有URL显示json数据

2 个答案: