问题:由于现在form表单的直接提交会导致页面跳转 ,用户体验不怎么好,故现在已经很少用form直接提交数据了。在不用form表单提交的情况下要怎么快速的获取到表单的value值?
在没有文件上传的前提下(或者文件上传单独操作时),可以用serialize 和serializeArray函数 来实现这个需求:
假设有一个form表单
<form action="" id="ser-form"> <input type="text" name="user" placeholder="user"><br> <input type="password" name="pass" placeholder="password"><br> <input type="radio" name="radio" value="rad1">rad1 <input type="radio" name="radio" value="rad2">rad2 <br> <input type="checkbox" name="check" value="ch1">ch1 <input type="checkbox" name="check" value="ch2">ch2 <input type="checkbox" name="check" value="ch3">ch3 <br> <button οnclick="ser_submit()">Submit</button> </form>
我们可以使用serialize()获取表单的值
var data = $('#ser-form').serialize();
这个时候 得到的data 是一个字符串 格式为 user=userName&pass=password&radio=val1&check=chk2 这个样子的 可以通过分割的方式来获取name值和value值
我们也可以用serializeArray()函数来获取表单的值
var data = $('#ser-form').serializeArray();此方法的得到的值是一个数组(array),数组里面是json格式的数据(对象)
格式为:[{name:'user',value:'User'},{name:'pass',value:'Password'},{name:'radio',value:'rad1'},{name:'check',value:'ch2'}]
值得注意的是当选中的radio 或者checkbox 没有设置value值时,默认值为on