Question

我正在尝试从本地文件获取响应并显示它。但是，响应文本会变回原始文本。任何帮助将不胜感激。

<script>
    function getMsg(text) {
        if (text.length == 0) {
            document.getElementById("msg").innerHTML = "";
            return;
        } else {
            document.getElementById("msg").innerHTML = "sending request";

            var xhttp = new XMLHttpRequest();
            var filepath = "";
            if (inputText == "File1") {
                filepath = "file1.txt";
            } else if (inputText == "File2") {
                filepath = "file2.txt";
            }
            xhttp.open("GET", filepath, true);

            xhttp.send();
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                alert(this.response);
                document.getElementById("msg").innerHTML = this.responseText;
            } else {
                document.getElementById("msg").innerHTML = "failed";
            }
        };    
    }
}
</script>
<body>
<form onsubmit="getMsg(this.file.value)">
        <label for="file">File:</label>
        <input type="text" name="file" id="file">
        <button type="submit">Get</button>
    </form>
</body>

Answer 1

这是因为您的表单通常与ajax一起提交并重新加载页面。您可以通过从onsubmit处理程序返回false来阻止表单提交。

<form onsubmit="getMsg(this.file.value); return false">

Answer 2

欢迎来到Stackoverflow，通过阅读代码，我注意到您遇到了两个主要问题。

避免使用innerHTML，这是一个坏习惯。

当您使用innerHTML时，即使您的字符串变量只是文本（没有HTML标记等），内容也会被JavaScript解析，这会花费一些时间，在像这样的小型应用中可能并不重要，但是在更大的应用中，这会对性能产生重大影响。

使用innerText。

您并没有阻止表单的默认行为。

使用AJAX请求时，最好的方法是将事件侦听器设置为如下形式：

您的HTML：

<form id="file_select"><!-- Add an id to identify the form -->
        <label for="file">File:</label>
        <input type="text" name="file" id="file">
        <button type="submit">Get</button>
</form>
<div id="msg"></div>

您可以像这样在JavaScript中添加事件监听器：

document.querySelector("#file_select").addEventListener("submit",(event)=>{
   event.preventDefault();
   //Your code
});

preventDefault()函数可防止窗口重定向到表单的action属性。（默认行为）

保持代码干净，可重用和简单。

这与更简洁的代码具有相同的功能，您应该尝试使代码易于阅读，这样一来，您就可以完全理解所有内容。

const message = (text) =>{
	 document.querySelector("#msg").innerText = text; //The message div
};
document.querySelector("#file_select").addEventListener("submit",(event)=>{
	event.preventDefault();
  let fileValue = event.target.file.value; //The value of the file
  if (fileValue != "") { //If value not empty
      var xhttp = new XMLHttpRequest();
      var filepath = (fileValue === "File1" ? "file1.txt" : (fileValue === "File2") ? "file2.txt" : "");
      message("Filepath is: "+filepath);
      xhttp.open("GET", filepath, true);
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
              message.innerText = this.responseText;
          } else {
              message.innerText = "failed";
          }
          xhttp.send();
      }
  } else { //If input is empty
      message("Invalid file.");
  }
});

<form id="file_select">
        <label for="file">File:</label>
        <input type="text" name="file" id="file">
        <button type="submit">Get</button>
</form>
<div id="msg"></div>

注意：您可以使用message("text")输出AJAX请求的结果。如何选择适合自己的预期行为取决于您。希望对您有帮助。

为什么Ajax响应没有显示在innerHTML中，而是变回原始文本？

2 个答案:

避免使用innerHTML，这是一个坏习惯。

您并没有阻止表单的默认行为。

保持代码干净，可重用和简单。