form表单提交数据的两种方式——submit直接提交、AJAX提交
时间：2024-03-30 14:10:56 来源：网络cs 作者：焦糖 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
submit提交
form表单本身提供action属性，在action属性中填写数据提交地址后，点击submit类型的按钮即可将数据提交至指定地址，代码如下：
<form action="127.0.0.1:3001/register" method="post" > <input type="text" placeholder="昵称" name="username"></input> <input type="email" placeholder="邮箱" name="email"></input> <input type="password" placeholder="密码" name="pwd"></input> <input type="submit">注册</input></form>注意：
method指定请求方式
每个input表单项需要有name属性
通过上述方式提交表单数据后，会发生页面跳转，跳转至action所指定的地址，很难满足开发需求。若要提交数据后不跳转，可以尝试通过ajax提交数据。
AJAX提交
form表单不填写action属性，并且在提交时阻止表单的默认行为，获取到表单数据后通过ajax的方式发送给后端，代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form id="form" method="post" > <input type="text" placeholder="昵称" name="username"></input> <input type="email" placeholder="邮箱" name="email"></input> <input type="password" placeholder="密码" name="pwd"></input> <button id="btn" type="submit">注册</button> </form></body><script> document.getElementById('btn').onclick=function(e){ e.preventDefault() let form = document.getElementById("form"); form.addEventListener("submit", function (event) { let XHR = new XMLHttpRequest(); // 将表单数据转为Formdat格式 let FD = new FormData(form); XHR.open("POST", "http://127.0.0.1:3001/register"); // XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded") XHR.send(FD) XHR.onreadystatechange=function(){ // do something according to response } }) }</script></html>本文链接：https://www.kjpai.cn/gushi/2024-03-30/150910.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。