这篇文章主要介绍了JS获取表单中数据formdata的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。
在文章正式开始之前呢,先介绍一个知识点,那就是var和let的区别,查看了各路大佬的文章,也经过各种尝试,最终得出的结果是,let声明的变量只在该变量对应的块中有效,有点局部变量的意思,而且let相对来说更加的严格。
正式开始我们的formdata之路,曾经稚嫩的我们在取form表单的值(value)时,都是这样的
<form action="" method="post"> <input type="text" name="name" id="name" value="aaa"> <input type="password" name="password" id="password"> <input type="submit" name="submit" value="提交" id="submit"> </form> <script> var name1 = document.getElementById('name').value; //获取id为name的值 var submit1 = document.getElementById('submit');//获取submit.准备为其绑定事件 submit1.onclick = function(){alert(name1)}//为submit绑定点击事件,将name的值在也页面弹窗显示 </script>
上面这种方法获取表单的值,不仅麻烦,而且代码量大,我们一起来看看更快更简洁的方法
第一种:获取普通input中的值
<!--onsubmit事件是在提交表单时触发--> <!-- return 一个函数:是指当函数的返回值位false时,表单不提交,为true时提交--> <form action="" method="post" target="_blank" onsubmit="return mySubmit(this)"> <!--mySumit函数中的参数this是指form调用该函数时会将form传入函数中--> <input type="text" name="username" > <input type="submit" name="submit" > </form> <script> function mySubmit(form){ <!--定义formData对象--> let formData = new FormData(form); <!--利用fromData对象的get方法获取表单数据--> let username = formData.get('username'); <!--进行一些判断或者操作--> if(username.length < 5){ alert('用户名不得小于5位'); return false; }else{ return true; } return false; } </script>
第二种:获取type为checkbox类型的input的值
<form action="" method="post" onsubmit="return mySubmit(this)"> <input type="checkbox" name="hoppy" value="music">音乐 <input type="checkbox" name="hoppy" value="game">游戏 <input type="checkbox" name="hoppy" value="movie">电影 <input type="submit" name="" value="提交"> </form> <script> function mySubmit(form){ //定义formData对象 let formData = new FormData(form); //获取值,因为get只能获取一个值,而这里是多选框,所以这里使用getAll方法 let hoppy1 = formData.getAll('hoppy'); console.log(hoppy1); //页面数据不进行提交,只是进行测试 return false; } </script>