Добро пожаловать в 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. Это зависит от вас, как приспособить это к вашему ожидаемому поведению. Надеюсь, это поможет вам.