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

时间:2012-06-29 19:33:36

标签: javascript jquery ajax json

我在使用JavaScript方面有一定的经验,但在处理jQuery和JSON方面却没有。

我正在尝试创建一个可以从我们的数据库中获取数据的工具,这样我就可以创建显示数据的新方法。

如果我在浏览器中输入以下网址,我会收到一条我在网页上显示为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

的链接

提前致谢。

2 个答案:

答案 0 :(得分: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();
}

答案 1 :(得分:1)

我找到了制作第三方JSON请求的解释,这些请求对我帮助很大。向下滚动到“从第三方服务器重新获取JSON”部分,该部分大约是页面的2/3。感谢MetalFrog的帮助。

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