我在按下按钮时发出异步请求：
在 html 正文加载时，init 函数为表单的提交事件提供处理程序。该处理程序实际上执行异步请求。
这里有两种解决方案。第一个，可以称为“直接的”，效果很好。第二个（“间接的”）则不然。 不同之处在于提交处理程序受到影响的方式。我希望这两种解决方案是等效的，但对于第二个解决方案，永远不会调用 async 内的代码。为什么？
第一
<!DOCTYPE html>
<html>
<meta meta name="viewport" content="width=device-width, user-scalable=no" />
<head>
<title>Radio</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function set_fields() {
}
function onload() {
myForm.onsubmit = async (e) => { // Direct call
e.preventDefault();
const form = document.getElementById('myForm');
const formData = new FormData(form);
const jsonObject = Object.fromEntries(formData);
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString);
let response = await fetch('/set', {
method: 'POST',
body: jsonString
});
};
}
</script>
</head>
<body onload="onload()">
<form id="myForm">
<p>
<input type="number" name="txtFrequency"
class="source" />
</p>
<p>
<button type="submit" name="set" class="volume">OK</button>
</p>
</form>
</body>
</html>
第二个
<!DOCTYPE html>
<html>
<meta meta name="viewport" content="width=device-width, user-scalable=no" />
<head>
<title>Radio</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function set_fields() {
async (e) => {
e.preventDefault();
const form = document.getElementById('myForm');
const formData = new FormData(form);
const jsonObject = Object.fromEntries(formData);
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString);
let response = await fetch('/set', {
method: 'POST',
body: jsonString
});
};
}
function onload() {
myForm.onsubmit = set_fields; // call via a function pointer
}
</script>
</head>
<body onload="onload()">
<form id="myForm">
<p>
<input type="number" name="txtFrequency"
class="source" />
</p>
<p>
<button type="submit" name="set" class="volume">OK</button>
</p>
</form>
</body>
</html>
在第一个示例中：
myForm.onsubmit = async (e) => {
您将函数分配给表单的
onsubmit提交表单时，会触发提交事件，这将导致运行该事件侦听器。
在第二个例子中：
myForm.onsubmit = set_fields;
您可以以相同的方式分配
set_fields提交表单时运行
set_fieldsasync (e) => {
它创建了另一个函数，但不对其执行任何操作。它不会将其分配到任何地方。它不叫它。它甚至不记录它。它对这个函数什么也没做。