时间戳

首页 > 解决方案 > 为什么Ajax 响应没有显示在innerHTML 中并变回原始文本？

javascript - 为什么Ajax 响应没有显示在innerHTML 中并变回原始文本？

问题描述

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

<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>

标签： javascriptajaxdom

解决方案

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

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

推荐阅读