jQuery JSON 初学者尝试创建简单的服务器请求答案

【问题标题】：jQuery JSON beginner trying to create simple server requestjQuery JSON 初学者尝试创建简单的服务器请求
【发布时间】：2012-07-01 08:18:33
【问题描述】：

我在使用 JavaScript 方面有些经验，但在处理 jQuery 和 JSON 方面没有经验。

我正在尝试创建一个从我们的数据库中获取数据的工具，以便我可以创建显示数据的新方式。

如果我在浏览器中输入以下 URL，我会收到一个我识别为 JSON 并显示在页面上的响应：

**URL:** http://osuc.biosci.ohio-state.edu/hymDB/OJ_Break.getSpmInfo?cuid=OSUM%20110110&callback=test

**Response:** test({"spmInfo":{"cuid":"OSUM 110110","alt_ids":[],"loc_name":"Mad River near State Route.....

我一直在尝试构建一些简单的东西来显示数据库中的信息，但到目前为止，我什至无法让我的页面显示任何相关内容。任何帮助和建议将不胜感激。

这是我的代码：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="getdb.js"></script>
</head>
<body>
<button type="button" onclick="getinfo()">click</button>
<h6 id="objinfo"></h6>
</body>
</html>

JavaScript：

function getinfo(){
    $.getJSON('http://osuc.biosci.ohio-state.edu/hymDB/OJ_Break.getSpmInfo?cuid=OSUM%20110110&callback=test', function(data) {
  $('#objinfo').html(JSON.stringify(data));
});}

这里是 JSFiddle Link的链接

提前致谢。

【问题讨论】：

您在打印数据之前是否设置了application/json 的Content-type 标头？
要注意的另一件事是，您告诉服务器调用名为 test 的回调函数，但（至少在您的 JS Fiddle 中）您没有定义它。最好让 jQuery 处理 JSON-P 回调 - 为此只需输入 callback=?。您甚至可能无法在 JS Fiddle 中使用此功能，因为它们可能（我不确定）会阻止全局变量/函数的声明（任何 JSON-P 都需要全局或全局可访问的函数）。
@WyoBuckeye - 注意：您的 Fiddle 不会工作，因为您的函数在 $() 中。

标签： javascript jquery ajax json

【解决方案1】：

请务必注意，在您的 JSON 有效之前，设置正确的标头并不重要。我从您示例中的 url 中获取了您的响应，并通过 JSONLint 对其进行了验证。

http://jsonlint.com/

这是一个简单的函数，用于将数据数组转储为 JSON 响应：

/**
 * @param $content Array of data to json_encode
 * @param bool $nocache If true, sets a no-cache header
 */
public function jsonOutput($content,$nocache = false)
{
    if( $nocache === true )
        header('Cache-Control: no-cache, must-revalidate');

    header('Content-type: application/json');
    print json_encode($content);
    exit();
}

【讨论】：

我会尝试一下，看看是否有帮助。该死，就在我认为自己擅长 Javascript 的时候，我完全被新的东西弄糊涂了。
@WyoBuckeye 确保你也看到我的编辑。您的 JSON 无效。
好的。谢谢金属蛙。我想我会在有机会的时候和我们的数据库经理谈谈，让他帮助我。这样会容易一些。

【解决方案2】：

我找到了一个对提出第 3 方 JSON 请求的解释，这对我有很大帮助。向下滚动到“从第三方服务器检索 JSON”部分，该部分位于页面下方约 2/3 处。感谢 MetalFrog 的帮助。

http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29#quickIDX9

【讨论】：