首页写一段前端提交表单页面代码

写一段前端提交表单页面代码

时间: 2024-11-05 22:25:30 浏览: 15

在HTML中创建一个简单的表单并使用JavaScript进行提交，可以按照以下步骤编写： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单提交示例</title> </head> <body> <form id="myForm" onsubmit="event.preventDefault(); submitForm()"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">提交</button> </form> <script> function submitForm() { // 获取表单数据 var formData = { name: document.getElementById('name').value, email: document.getElementById('email').value }; // 使用fetch API 或 XMLHttpRequest 发送POST请求 fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) .then(response => response.json()) .then(data => console.log('提交成功:', data)) .catch(error => console.error('提交失败:', error)); } </script> </body> </html> ``` 这个例子中，用户填写姓名和邮箱后点击“提交”按钮，会阻止表单默认的提交行为，然后通过`submitForm`函数发送一个POST请求到`/api/submit`接口，并将表单数据转换为JSON格式。服务器接收到请求后，可以在后端进行处理。

阅读全文