JSP Javascript 不工作未捕获的引用错误

Question

我目前正在尝试建立一个小型 Web 应用程序，人们可以在其中上传、评分和下载文件。后端完成，现在只缺少前端部分。 我正在使用 java 服务器页面进行此操作。

问题是：我想避免每次更改搜索选项时都重新加载页面，所以我想为此使用 javascript 中的 async&await。 现在理论上我的脚本可以从后端获取所需的数据。当一个按钮被点击时，这个函数会被执行：

async function searchDatabase() {
const edtSearchText = document.getElementById("edtSearchOption");
const sltSorting = document.getElementById("sltSortingOption");
const sltOrdering = document.getElementById("sltOrderingOption");

var searchOption = edtSearchText.value;
var sortingOption = sltSorting.value;
var orderOption sltOrdering.value;

const url = "/search";

var data = new FormData();
data.append("search", searchOption);
data.append("sorting", sortingOption);
data.append("ordering", orderOption);

var requestParams = {
    method: 'GET',
    body: data,
    redirect: 'follow'
};

let response = await fetch(url, requestParams);
let data = await response.json(); }

现在当我在浏览器中访问我的页面时，它会正常显示数据，现在我想搜索一些东西，所以我在表单中输入数据并单击按钮。 问题如下：

1. 好像还想重新加载页面
2. 我收到此错误：“未捕获的 ReferenceError：未定义 searchDatabase onsubmit http://localhost:8081/?search=&sorting=date_upload&ordering=1:1" 我尝试了一整天来解决这个问题，希望你能在这里帮助我。

这是我正在访问的站点welcome.jsp的代码：https://pastebin.com/g6PRV5Au

如果您需要更多详细信息，请告诉我。

祝你有美好的一天！

Answer 1

在提交表单时调用您的方法 searchDabase()，如下所述。

<form name="myForm" onsubmit="return searchDatabase();"> 

并从方法的末尾返回 false，如下所示。

function searchDatabase(){
// your code......
return false;
}

学习愉快:)