时间戳

首页 > 解决方案 > 如何修复此错误以及如何正确编写我的 github 用户名？是有美元符号还是没有？

javascript - 如何修复此错误以及如何正确编写我的 github 用户名？是有美元符号还是没有？

问题描述

我从浏览器得到的错误是这样的：

未捕获的 DOMException：无法在“XMLHttpRequest”上执行“setRequestHeader”：对象的状态必须是 OPENED。

我把图片放在我的 github 和 json 文件中。我正在从我的工作站执行 html 文件。我应该将 html 文件推送到 github 并从那里执行吗？

这是我推送到我的 Github 的 Json 文件。

{
    "events" : [
        { "location" : "San Francisco, CA", "date" : "May 1", "img" :"pic1.jpg"},
        { "location" : "Austin , TX", "date" : "May 15", "img" :"pic2.jpg"},
        { "location" : "New York , NY", "date" : "May 30", "img" :"pic3.jpg"}
    ]
}

这是我的 HTML 文件：

<!DOCTYPE html>
<html>

<body>
    <h2>User Account Example</h2>

    <script>
        var xhr = new XMLHttpRequest();
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.open("GET", 'https://github.com/${username}/JSON/myjson.json', true);
        xhr.send(null);

        xhr.onload = function () {
            console.log("xhr.status: " + xhr.status);
            if (xhr.status === 200) {
                console.log("Pineapple Juice");
                responseObj = JSON.parse(xhr.responseText);
                var newContent = '';
                var i;
                for (i = 0; i < responseObj.events.length; i++) {
                    newContent += '<div class="event">';
                    newContent += '<img src="' + responseObj[i].img + '"';
                    newContent += 'alt="' + responseObj[i].location + '" />';
                    newContent += '<p><b>' + responseObj[i].location + '</b><br>';
                    newContent += responseObj.events[i].date + '</p>';
                    newContent += '</div>';
                }
                document.getElementById("myuser").innerHTML = newContent;
            }
        };
    </script>
    <div id="myuser"></div>
</body>

</html>

标签： javascripthtmljsonxmlhttprequestweb-deployment

解决方案

顺序是错误的。并且Access-Control-Allow-Origin是响应标头，这不适用于请求。此外，GET 请求不能有正文，因此您不需要内容类型标头。

var xhr = new XMLHttpRequest();

xhr.onload = function () {
    console.log("xhr.status: " + xhr.status);
    if (xhr.status === 200) {
        console.log("Pineapple Juice");
        responseObj = JSON.parse(xhr.responseText);
        var newContent = '';
        var i;
        for (i = 0; i < responseObj.events.length; i++) {
            newContent += '<div class="event">';
            newContent += '<img src="' + responseObj[i].img + '"';
            newContent += 'alt="' + responseObj[i].location + '" />';
            newContent += '<p><b>' + responseObj[i].location + '</b><br>';
            newContent += responseObj.events[i].date + '</p>';
            newContent += '</div>';
        }
        document.getElementById("myuser").innerHTML = newContent;
    }
};

xhr.open("GET", `https://github.com/${username}/JSON/myjson.json`, true);

// here can you set request headers
xhr.setRequestHeader("Accept", "application/json");

xhr.send(null);

推荐阅读