当用户提交表单时,我们可以使用JavaScript中的addEventListener
方法或者onsubmit
属性来绑定一个回调函数来实现代码逻辑。以下是实现步骤:
1. 编写HTML表单
首先需要编写一个HTML表单:
<form id="myForm">
<input type="text" name="username" placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" />
<button type="submit">提交</button>
</form>
这个表单包含了两个输入框和一个提交按钮。
2. 编写JavaScript代码
接下来,我们需要编写一个JavaScript代码块来处理表单提交后的逻辑。这里我们会使用到两个方法:addEventListener
和preventDefault
。
const myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function(evt) {
evt.preventDefault(); // 阻止表单提交默认行为
// 你的代码逻辑
});
这里首先通过querySelector
方法选中了表单元素,并使用addEventListener
方法绑定了一个submit
事件。事件处理函数中的evt
参数表示事件对象,我们使用preventDefault
方法阻止了表单提交的默认行为。
3. 在事件处理函数中实现代码逻辑
在事件处理函数中,我们可以编写具体的逻辑代码来处理表单提交后需要做的事情。以下是两个示例:
a. 获取表单数据
const myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function(evt) {
evt.preventDefault();
const form = evt.target;
const username = form.elements.username.value;
const password = form.elements.password.value;
console.log(`用户名:${username},密码:${password}`);
});
这个示例中,我们获取了表单元素和其中的两个输入框元素,并从输入框元素中取出了值。然后我们在控制台中输出了这些值。
b. 发起异步请求
const myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function(evt) {
evt.preventDefault();
const form = evt.target;
const username = form.elements.username.value;
const password = form.elements.password.value;
fetch("/api/login", {
method: "POST",
body: JSON.stringify({ username, password }),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
});
这个示例中,我们使用了fetch函数发起了一个异步请求(假设服务器端提供了一个/login的API接口),并将表单数据以JSON格式发送给了服务器端。当服务器返回响应时,我们在控制台中输出了响应数据,或者在出现错误时输出了错误信息。
以上就是“提交表单时执行func方法实现代码”的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:提交表单时执行func方法实现代码 - Python技术站