仅使用JavaScript和jQuery从json web服务获取数据_Javascript_Jquery_Json_Api_Jsonp

仅使用JavaScript和jQuery从json web服务获取数据

javascript jquery json api

仅使用JavaScript和jQuery从json web服务获取数据,javascript,jquery,json,api,jsonp,Javascript,Jquery,Json,Api,Jsonp,我已使用此url下载了一个示例应用程序。工作正常的部分是： <script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script> <script src="scripts/json.htmTable.js" type="text/javascript"></script> <script src="scripts/json.debug.js" type="t

我已使用此url下载了一个示例应用程序。工作正常的部分是：

<script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<script src="scripts/json.debug.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(document).ready(function () {
        /* ASSOC ARRAY - Detail View */
        var json1 = { "d": [{ "__type": "acation", "id": "001", "date": "2010-06-01
                      00:00:00", "iod": "1", "mer": "ABC ", "tity": "6", "ot": 
                      "12,500", "nt": "75000", "ou": "A", "rep": "we", "perc": "34", 
                      "ine": "one", "year": "2009", "ct": "ABC ", "alet": "90000",  
                      "pro": "1500", "stats": "ive", "crnt": "5000", "ter": "AA"}] }

        /* NORMAL ARRAY - Detail View */
        var json2 = { "d": [{ __type: "acation", id: "001", date: "2010-06-01 
                      00:00:00", iod: "1", mer: "ABC ", tity: "6", ot: "12,500", nt: 
                      "75000", ou: "A", rep: "we", perc: "34", ine: "one", year: 
                      "2009", ct: "ABC ", alet: "90000", pro: "1500", stats: "ive", 
                      crnt: "5000", ter: "AA"}] }

        /* NORMAL ARRAY - Table View */
        var json3 = { "d": "[{\"Id\":1,\"UserName\":\"Sam Smith\"},{\"Id\":2,\"UserName
                      \":\"Fred Frankly\"},{\"Id\":1,\"UserName\":\"Zachary 
                      Zupers\"}]" }

        $('#DynamicGridLoading').hide();

        delete json1.d[0]["__type"];
        delete json2.d[0]["__type"];

        $('#DynamicGrid').append(CreateDetailView(json1.d, "lightPro", true)).fadeIn();
        $('#DynamicGrid').append(CreateDetailView(json2.d, "lightPro", true)).fadeIn();
        $('#DynamicGrid').append(CreateTableView(json3.d, "lightPro", true)).fadeIn();

    });
</script>

</head>
 <body>
   <form id="form1" >
   <div id="DynamicGrid" >
     <div id="DynamicGridLoading" >
        <img src="images/loading.gif" /><span> Loading Data... </span>
     </div>
   </div>
  <br />
  <a href="jsonservice_api.html">Json web service</a>
  </form>
 </body>


$（文档）.ready（函数（）{
/*关联阵列-详细视图*/
var json1={“d”：[{“uu类型”：“acation”，“id”：“001”，“date”：“2010-06-01
00:00:00，“iod”：“1”，“mer”：“ABC”，“tity”：“6”，“ot”：
“12500”，“nt”：“75000”，“ou”：“A”，“rep”：“we”，“perc”：“34”，
“ine”：“一年”：“2009年”，“ct”：“ABC”，“alet”：“90000”，
“pro”：“1500”，“stats”：“ive”，“crnt”：“5000”，“ter”：“AA”}]}
/*法线阵列-详细视图*/
var json2={“d”：[{{uuuu类型：“acation”，id:“001”，日期：“2010-06-01
00:00:00“，iod:“1”，mer:“ABC”，tity:“6”，ot:“12500”，新界：
“75000”，ou:“A”，代表：“我们”，perc:“34”，ine:“一”，年份：
“2009”，ct:“ABC”，alet:“90000”，pro:“1500”，统计数据：“ive”，
crnt:“5000”，三者：“AA”}]}
/*普通数组-表视图*/
var json3={“d”：“[{\'Id\'：1，\'UserName\'：\'Sam Smith\'，{\'Id\'：2，\'UserName”
\“：\'Fred\”}，{\'Id\'：1，\'UserName\'：\'Zachary
Zupers\“}]”
$（'#DynamicGridLoading'）.hide（）；
删除json1.d[0][“_类型”]；
删除json2.d[0][“_类型”]；
$（'#DynamicGrid'）.append（CreateDetailView（json1.d，“lightPro”，true））.fadeIn（）；
$（'#DynamicGrid'）.append（CreateDetailView（json2.d，“lightPro”，true））.fadeIn（）；
$（'#DynamicGrid'）.append（CreateTableView（json3.d，“lightPro”，true））.fadeIn（）；
});
正在加载数据。。。

它工作得很好，但是当我尝试使用像这个天气api这样的免费json Web服务时：以下面的方式，我什么也得不到

  <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun&
                  format=json&num_of_days=5&key=3tkb34yntmwqn23uambzdvgm",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{}",
            success: function (res) {
                $('#DynamicGrid').append(CreateTableView1(res, "CoolTableTheme", 
                                    true)).fadeIn();
            }
        });
    });

</script>


$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun&
format=json&num_of_days=5&key=3tkb34yntmwqn23uambzdvgm“，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
数据：“{}”，
成功：功能（res）{
$（'#DynamicGrid'）.append（CreateTableView1（res，“CoolTableTheme”），
是的）；
}
});
});

CreateTableView的定义在脚本中包含的一个js文件中定义如下：

function CreateTableView(objArray, theme, enableHeader) {
  // set optional theme parameter
  if (theme === undefined) {
      theme = 'mediumTable'; //default theme
  }

  if (enableHeader === undefined) {
      enableHeader = true; //default enable headers
  }

  var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

  var str = '<table class="' + theme + '">';

  // table head
  if (enableHeader) {
      str += '<thead><tr>';
      for (var index in array[0]) {
          str += '<th scope="col">' + index + '</th>';
      }
      str += '</tr></thead>';
  }

  // table body
  str += '<tbody>';
  for (var i = 0; i < array.length; i++) {
      str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
      for (var index in array[i]) {
          str += '<td>' + array[i][index] + '</td>';
      }
      str += '</tr>';
  }
  str += '</tbody>'
  str += '</table>';
  return str;
}

函数CreateTableView（objArray、主题、enableHeader）{
//设置可选的主题参数
如果（主题===未定义）{
主题='mediumTable'；//默认主题
}
如果（enableHeader==未定义）{
enableHeader=true；//默认启用标头
}
var array=typeof objArray！=“object”？JSON.parse（objArray）：objArray；
var-str=''；
//桌头
如果（启用标头）{
str+=''；
for（数组[0]中的变量索引）{
str+=''+索引+''；
}
str+=''；
}
//桌体
str+=''；
对于（var i=0；i

试试metwit怎么样？

下面是一个简单有效的jQuery示例：
查看更多信息
披露：我拥有这个API。
这可能是个问题。Web浏览器会阻止来自其他域的内容（因此，如果您在localhost或www.yoursite.com上调用Web服务，则会被阻止）
要确认这种情况，您可以打开web浏览器的开发人员工具，控制台或网络区域中可能会出现有关跨域调用的错误消息。（要打开开发工具，请在Chrome中使用Ctrl-Shift-I，在Firefox中使用Ctrl-Shift-K，在IE中使用F12）
如果服务支持它们，您可以使用或。否则，您可以在自己的项目上创建一个充当代理的服务，在另一个域上调用该服务，然后返回结果。（跨域限制只是一种浏览器安全功能，因此您可以从服务器端的ASP.NET、PHP、Java e.t.c服务调用该服务，而不会出现问题）。
Hi@Neil感谢您的回复。有没有办法不用任何本机代码调用该服务，我正在使用phonegap创建一个简单的混合移动应用程序。根据你的建议，我在firefox的开发者工具中有以下信息。未声明HTML文档的字符编码。如果文档包含US-ASCII范围之外的字符，则在某些浏览器配置中，文档将呈现乱码文本。页面的字符编码必须在文档或传输协议中声明。