检索纯文本 JSON，插入 JavaScript

Question

我有一个返回 application/json Content-Type 的 URL http://myapp.com/get_data。当我浏览到那个 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 数组分配到 process_data() 内的 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)
}

当然，这只是一个丑陋的代码混搭，但我希望它传达了我想要表达的意思：

1. JavaScript 将 GET 一个 URL。
2. 阅读源代码。
3. 将源解释为 JSON。
4. 将其分配给变量。

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库，可以使用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)

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 几乎是一种标准：

$.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/