使用 JSON POST 请求答案

【问题标题】：Using JSON POST Request使用 JSON POST 请求
【发布时间】：2012-07-12 16:54:13
【问题描述】：

我正在尝试使用 JSON 向 API 发起 POST 请求。

我找到了一些示例代码，在我走得太远之前，我想让它工作，但我卡住了......

<html>
<head>
<script type="text/javascript">
function JSONTest()
{
requestNumber = JSONRequest.post(
    "https://example.com/api/",
    {
        apikey: "23462",
        method: "example",
        ip: "208.74.35.5"
    },
    function (requestNumber, value, exception) {
        if (value) {
            processResponse(value);
        } else {
            processError(exception);
        }
    }
); 
}
</script>
</head>
<body>

<h1>My JSON Web Page</h1>


<button type="button" onclick="JSONTest()">JSON</button>

</body>
</html>

这是一个 .html 文件，我在 chrome 中运行。当我点击按钮时没有任何反应......

我想我错过了一段解释 JSON 响应并可以显示的 javascript？否则还有其他建议吗？

【问题讨论】：

我的印象是 JSON 是 Javascript 的一个子集...？所以Javascript可以毫无问题地运行它？
JSON 是一种数据交换格式。现代浏览器可以理解这一点，但旧浏览器需要一个库才能将 JSON 字符串转换为 JavaScript 对象。我建议使用 jQuery 之类的库来帮助您解决此问题，因为这也将解决旧客户端的一些浏览器兼容性问题。
大多数现代浏览器都有可用的 JSON 对象，但 JSONRequest 不是窗口或文档对象上的原生可用对象或函数。
JSONRequest 目前只是草稿。
@kinakuta 你是说我应该导入它们吗？还是您建议的已经内置了一个可靠的 JSON 对象？

标签： javascript json api post

【解决方案1】：

下面是一个使用 jQuery 的示例。希望这会有所帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>My jQuery JSON Web Page</title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

JSONTest = function() {

    var resultDiv = $("#resultDivContainer");

    $.ajax({
        url: "https://example.com/api/",
        type: "POST",
        data: { apiKey: "23462", method: "example", ip: "208.74.35.5" },
        dataType: "json",
        success: function (result) {
            switch (result) {
                case true:
                    processResponse(result);
                    break;
                default:
                    resultDiv.html(result);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
        }
    });
};

</script>
</head>
<body>

<h1>My jQuery JSON Web Page</h1>

<div id="resultDivContainer"></div>

<button type="button" onclick="JSONTest()">JSON</button>

</body>
</html>

Firebug 调试过程

【讨论】：

这是一个很好的例子！我的问题是它被发送到“请求错误”部分。我用非示例数据替换了所有内容，但它仍然无法正常工作。我已经成功联系了这个 API，并通过使用 PHP curl 函数并让用户在发布到 php.ini 的 html 页面上输入 apikey、方法和 ip 来获得回复。任何其他想法我可以如何完成此操作并使用 javascript 获得响应？
嗨。我已经更新了上面的回复，只是更改了错误处理程序，它应该为您提供有关错误的更多信息。通常，如果该错误处理程序被调用，它通常是某种传输/cors 错误，正如 Jason 所提到的。尝试更新代码并查看新错误是什么。我强烈建议您安装 Fiddler，或使用 Google Chrome F12 Debug，这样您就可以“确切地”看到“引擎盖下”正在发生的事情。随时回复我:)
非常感谢。我真的很感谢你在这方面坚持我。我一直在努力把这个放在一起好几天，甚至无法连接！无论如何，我尝试添加代码。它只返回“0”。我正在运行 firebug，我是新手，所以如果您对希望我检查的部分有任何要求，我很乐意这样做！
很高兴您设置了开发环境。这绝对是要走的路。如果您按 F12 以运行 Firebug（我假设您使用的是 FireFox），然后选择 [Net] 选项卡，然后单击下面的 XHR。这将列出浏览器发出的所有 XHR (XMLHttpRequest) 请求。不用担心，尽管您使用的是 JSON，但无论如何浏览器都会将它们列在 XHR 下。让我知道你过得怎么样。
Uner URL: POST/api/ 状态: Aborted Domain: example.com Size: 0 Remote IP: 好像放弃联系了？

【解决方案2】：

现代浏览器目前还没有实现 JSONRequest（据我所知），因为它现在只是一个草案。我发现有人将它实现为可以包含在页面中的库：http://devpro.it/JSON/files/JSONRequest-js.html（请注意它有一些依赖项）。

否则，您可能想使用另一个 JS 库，例如 jQuery 或 Mootools。

【讨论】：