serialize() 及 serializeArray()函数的作用

问题:由于现在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()">Submitbutton>
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


你可能感兴趣的:(Jquery)