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

Question

I Am new in working with json and jquery. 我是使用json和jquery的新手。 I am trying to study the basics of json and jquery by working on some example. 我正在尝试通过一些示例来研究json和jquery的基础。 So I use existing json data in http://api.androidhive.info/contacts for my example. 因此，在我的示例中，我使用了http://api.androidhive.info/contacts中的现有json数据。 I want to display this data in my HTML page. 我想在我的HTML页面中显示此数据。 My code is: 我的代码是：

<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>

can any one please give me some brief introduction to JSON and how it's working ? 任何人都可以给我简要介绍一下JSON及其工作原理吗？

Thanks in advance. 提前致谢。

Answer 1

You are iterating the JSON wrong, in your case since you are using jQuery (as mentioned) you can use the $.each(json, callback); 您迭代的JSON错误，在您的情况下，因为您使用的是jQuery（如上所述），所以可以使用$ .each（json，callback）; helper fron jQuery, you can see the documentation here Jquery $.each documentation jQuery助手，您可以在此处查看文档jQuery $ .each文档

For an example implementation I've created this JSFIDDLE LINK for you. 对于示例实现，我为您创建了此JSFIDDLE LINK 。 Have a great day ahead. 祝您有美好的一天。 Don't forget that JSON means 别忘了JSON意味着

Javascript Object Notation Javascript对象符号

It's an object. 这是一个对象。

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

Answer 2

jQuery jQuery的

Am try to study the basics of json and jquery 我尝试研究json和jquery的基础知识

Is a Javascript library with lots of very usefull methods. 是一个Javascript库，其中包含许多非常有用的方法。 If you want to create a dynamic website it is very recommended to look into jQuery. 如果您想创建一个动态网站，强烈建议您使用jQuery。 There are many site with great explanation on what jQuery can do. 有很多站点对jQuery的功能都有很好的解释。 As far as your example is concerned: There is an issue when passing variables/data from one framework to another or even when simply storing data. 就您的示例而言：将变量/数据从一个框架传递到另一个框架，甚至只是存储数据时，都会出现问题。 Here comes JSON. JSON来了。

JSON JSON

Or JavaScript Object Notation ( JSON ) is used to solve exactly that problem. 或使用JavaScript对象表示法（ JSON ）来解决该问题。 What is basically does is take all the desired data (array, variable, object, string etc.) and writes it in a human readable and for other frameworks readable fashion. 基本上要做的是获取所有所需的数据（数组，变量，对象，字符串等），并以人类可读的方式以及其他框架可读的方式将其写入。 I use JSON to store data in files when no database is available or when passing data from one framework to another (like JS <-> PHP). 当没有数据库可用或将数据从一个框架传递到另一个框架（例如JS <-> PHP）时，我使用JSON将数据存储在文件中。

Your example code 您的示例代码

What happens here: 这里会发生什么：

$(':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);
          },
    })

There is the serverside.php file that receives a GET command and returns HTML . 有一个serverside.php文件，它接收GET命令并返回HTML 。 All the HTML content is in JSON type (so no <stuff> , ie no actual HTML) and your success function returns that content in the msg variable. 所有HTML内容均为JSON类型（因此没有<stuff> ，即没有实际的HTML），并且您的success函数将在msg变量中返回该内容。 Typically you use something like 通常，您使用类似

var obj = JSON.parse(text);

to convert the JSON data to Javascript variables. 将JSON数据转换为Javascript变量。 Read this here JSON in Javascript 在Java JSON中阅读此内容

JSONP JSONP

Now what if you want to do some domain crossing (as you suggested), then I strongly recommend to read this here What is JSONP all about? 现在，如果您想做一些跨域操作（如您建议的那样），那么我强烈建议您在此处阅读此内容JSONP的全部含义是什么？ . 。 It explains what JSONP is all about 它解释了JSONP的全部意义

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

问题描述

2 个解决方案

解决方案1
0 2015-06-05 05:34:27

解决方案2
0 2015-06-05 05:39:43

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

问题描述

2 个解决方案

解决方案1 0 2015-06-05 05:34:27

解决方案2 0 2015-06-05 05:39:43

解决方案1
0 2015-06-05 05:34:27

解决方案2
0 2015-06-05 05:39:43