如何使用ajax调用显示来自现有url的json数据

How to display a json data from a existing url using ajax call

本文关键字：url json 数据 ajax 何使用 调用 显示      更新时间：2023-09-26

我是新的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和它是如何工作的?

您正在迭代JSON错误，在您的情况下，因为您正在使用jQuery(如上所述)，您可以使用$。每个(json,回调);你可以在这里看到jQuery $的文档。每个文档

对于一个示例实现，我创建了这个JSFIDDLE LINK给你。祝你有美好的一天。别忘了JSON的意思是

Javascript Object Notation

它是一个对象。

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

jQuery

我试着学习json和jquery的基础知识

是一个Javascript库，有很多非常有用的方法。如果你想创建一个动态的网站，非常推荐使用jQuery。有很多网站对jQuery的功能做了很好的解释。就您的示例而言:在将变量/数据从一个框架传递到另一个框架或甚至只是存储数据时存在问题。接下来是JSON。

JSON

或者JavaScript Object Notation (JSON)就是用来解决这个问题的。它所做的基本上是获取所有所需的数据(数组、变量、对象、字符串等)，并以人类可读的和其他框架可读的方式将其写入。当没有数据库可用或将数据从一个框架传递到另一个框架(如JS <-> 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变量。在这里阅读Javascript中的JSON

JSONP

现在，如果你想做一些域交叉(如你所建议的)，那么我强烈建议阅读这里JSONP是关于什么的?． 它解释了JSONP的全部内容

相关文章：