Question

我目前正在使用Materialized CSS框架构建基于JS的网站。我是JS的新手并且通过这个过程学习。

我有这个HTML代码：

＆＃13;

 <ul class="collapsible popout" data-collapsible="accordion" ng-controller="web">
    <li id = "event">
      <div class="collapsible-header">
       <div class="col s4 " id = "city"><i class="material-icons">info</i> {{event.city}}</div> 
       <div class="col s4 "><i class="material-icons">query_builder</i> time</div> 
       <div class="col s4 "><i class="material-icons">location_on</i> place</div>  
     </div>
     <div class="collapsible-body">
      <p>
        <div class="col s12 "> Infornation about the event </div> 
      </p>
       <div class="right-align">
          <input type="checkbox" id="test5" class="right-align" />
          <label for="test5"> Attend </label> 
        </div>
    </div>
  </li>

＆＃13;

数据来自我从API调用获得的JSON。 JSON看起来像这样：

＆＃13;

[
{"city": "Tel Aviv-Yafo",
  "event_url": "http://www....",
  "attendees": 167, "description": "Dear SpeedMinders,... ",
  "price": "free", "host": "Bella Miller",
  "address": "Yigal Alon 98, Electra Tower,34 Floor, Events Zone Space",
  "date": 1440914400000,
  "id": 6036899730817024,
  "name": "Fast Track to Innovation (FTI) - \u20ac 3 Million opportunity for EU funding"
},
...
]

＆＃13;

我想创建一个包含10个事件的列表（每个事件都是li标签）。以这种方式，我可以从JS本身迭代列表。

我有一个AJAX调用来获取JSON，我似乎找不到以任何方式显示返回的JSON的方法：

＆＃13;

(function($){
	$(function(){
		$('.button-collapse').sideNav();
		$('.parallax').parallax();
			getlist();
  }); // end of document ready
})(jQuery); // end of jQuery name space


var eventlist = [];
var name = 'ita';
function getlist()
{
	$.ajax({
		url: 'http://attender-mobile.appspot.com/api',
		type: "GET",
		data: "",
		contentType: "json",
		dataType: "jsonp text",
		complete: function (data) {
			alert(JSON.stringify(data));
			eventlist = data;    
		}
	});
document.getElementById("city").innerHTML = JSON.stringify(result);
}

＆＃13;

该行：

警报（JSON.stringify（结果））;

只是显示

{＆＃34; readyState的＆＃34：4，＆＃34;状态＆＃34;：200，＆＃34;状态文本＆＃34;：＆＃34;负载＆＃34;}

我发现很难找到我需要做哪些工具，以及如何开始这样做。

任何帮助将不胜感激......

Answer 1

查看http://api.jquery.com/jquery.getjson/和http://api.jquery.com/jquery.ajax/，其中介绍了如何使用ajax检索JSON。

既然你正在学习，我会给你一两个提示：
1）您的dataType参数：它是否包含正确的值？
2）你宁愿使用success参数而不是完整的参数吗？

将API返回JSON注入<li> Materialized.css JS

1 个答案: