更新

Question

我有一个返回http://myapp.com/get_data application/json的网址Content-Type。当我浏览到该URL时，我将在浏览器窗口中获得纯文本JSON数组

[[key, value],
 [key, value],
 [key, value],
 ...]

我还有一个JavaScript函数，希望数据采用JSON数组格式

function process_data() {
  var data = // give me more data in JSON array format...
}

如何让我的JavaScript浏览到http://myapp.com/get_data并将生成的JSON数组分配到data内的process_data()变量？

我是JavaScript的新手（来自Python背景），如果你能推荐使用核心JavaScript库的解决方案，我将不胜感激。也欢迎使用其他库的解决方案，最好是那些被认为是最佳实践的解决方案。

更新

看来我的问题并不清楚。让我举一个Python的例子。在完成必要的导入后，我可以执行类似

的操作

url = "http://myapp.com/get_data"
page = urllib2.urlopen(url)
page_source = page.read()

这一次，page_source已经是我可以轻松使用的Python str对象，分配给其他变量等。如果我可以将Python和JavaScript混合在一起，对于这个问题的上下文，我想做一些像

这样的事情

function process_data() {
  url = "http://myapp.com/get_data"
  page = urllib2.urlopen(url)
  page_source = page.read()
  var data = convert_str_to_JSON(page_source)
}

当然，这只是代码的一个丑陋的混乱，但我希望它传达了我想要的东西：

JavaScript将GET一个网址。
阅读来源。
将源解释为JSON。
将其分配给变量。

Answer 1

较新的浏览器本身支持JSON解析。

你可以说JSON.parse('json data')。对于旧版浏览器（例如IE 7或6），您可以使用此库：https://github.com/douglascrockford/JSON-js

使用上面库中的json2.js。它检查是否存在本机浏览器实现，如果没有，则添加它。

请勿使用eval（作为eval is evil）！

更新要获取'json数据'，请使用：

var jsonObject = {}; 
var xhr = new XMLHttpRequest();
xhr.open( "GET", url, true );      // true makes this call asynchronous
xhr.onreadystatechange = function () {    // need eventhandler since our call is async
     if ( xhr.readyState == 4 && xhr.status == 200 ) {  // check for success
        jsonObject = JSON.parse( xhr.responseText );
     }
};
xhr.send(null);

此外，我建议您阅读此article以了解跨浏览器问题和XMLHttpRequest对象的实现。

Answer 2

现在使用JQuery几乎是一个标准：

$.get('/get_data', function (data) {
   //success callback

}, 'json');

我在这里做了一个小提琴，看看这里的样本： http://jsfiddle.net/b24GZ/ - 从http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo

获取json数据

参考文献：

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

http://api.jquery.com/jQuery.parseJSON/

Answer 3

有几种方法。如果您正在使用某种类型的库，那么它们中的大多数都具有内置的JSON.parse（）方法。较新的浏览器（即Chrome，Firefox，Safari等）内置了该功能。

另一种方法是使用jsonp回调。使用此方法，您可以在脚本中定义函数，然后将脚本标记写入页面，并将要加载的URL作为其源加载。您将函数的名称作为参数传递给远程uri，并且您的服务器使用回调包装json响应。当它加载到页面中时，您的函数使用它作为javascript对象包装的数据执行。

这是一个简单的例子：

var your_callback = function(obj){
    console.log(obj);
}

<script src="http://myapp.com/get_data/?callback=your_callback"></script>

此时，执行your_callback并且“obj”变量包含您的数据。

同样，如果你有使用javascript库的优势，那么这个功能可能已经出现了.jQuery让这一点变得非常简单。

JSONP通常用于跨域数据传输，但它在本地也可以正常工作。如果您在本地执行此操作，则不需要使用JSONP，而是可以使用XHR请求。

Answer 4

如果你使用jQuery库，可以使用jquery-jsonp库code.google.com jquery-jsonp

function getProfile(userId) {

$.jsonp({
  "url": "http://gdata.youtube.com/feeds/api/users/"+userId+"?callback=?",
  "data": {
      "alt": "json-in-script"
  },
  "success": function(userProfile) {
      // userProfile - is JSON data with which you can work
      // handle user profile here 
  },
  "error": function(d,msg) {
      alert("Could not find user "+userId);
  }
}); }

另请参阅“http://myapp.com/get_data” 页面你需要将JSON数据放入回调数据

callback(json_data_here)

检索纯文本JSON，插入JavaScript

更新

4 个答案: