Ajax 未获取文本文件

Question

<!DOCTYPE html>

<head>
    <title>
        Ajax Joke of the Dya application
    </title>
    <script>
        var Request = false;
        if (window.XMLHttpRequest) {
            Request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            Request = new ActiveXObject("Microsoft.XMLHTTP");
        }

        function RetrieveJoke(url, elementID) {
            console.log("Ret")
            if (Request) {
                var RequestObj = document.getElementById(elementID);

                Request.open("GET", url);

                Request.onreadystatechange = function() {
                    if (Request.readystate == 4 && Request.status == 200) {
                        RequestObj.innerHTML = Request.responseText;
                    }
                }
            }
        }
    </script>
</head>

<body>
    <h1> Where do bees go when they get married?</h1>
    <button type="button" value="Fetch Answer" onsubmit="RetrieveJoke('honeymoon.txt','Target')"> ANSWERRR</button>
    <form>
        <input type="button" value="Fetch Answer" onsubmit="retrieveJoke('honeymoon.txt', 'Target')" />

    </form>

    <div id="Target"> </div>
</body>

</html>

所以这是学习 ajax 的日常应用程序的简单笑话，其中按钮应该获取答案，我们为相同的按钮部署 ajax

这是应该获取“蜜月”的 ajax 代码。 当我们点击答案并获取答案按钮时，它写在 honeymoon?txt 文件中，但它不是？？？ 请帮忙

Answer 1

你可以使用这个 function

async function fetchData(path) {
  const data = await fetch(path); // Fetching file content
  return await data.text(); // Converting it to text and return
}

然后这样调用

const data = fetchData("./myfile.txt"); // Pass your file path here
console.log(data); // This will return your file content

所以最后的答案可能是

const button = document.querySelector("button"); // Your button
const result = document.querySelector("#Target"); // Your result div

button.addEventListener("click", function() {
  const data = fetchData("./honeymoon.txt");
  result.textContent = data;
});