jquery-序列化表单

原创

Marydon 2023-02-14 10:04:01 博主文章分类：Jquery ©著作权

文章标签 JQUERY form表单 html 序列化 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者Marydon的原创作品，请联系作者获取转载授权，否则将追究法律责任

createTime--2016年9月25日08:54:48
参考链接：http://www.w3school.com.cn/tags/html_ref_urlencode.html

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化

js部分

$(function() {//页面加载完毕
    //给单选框添加一个单击事件
    $("form input[name=sex]").click(function() {
        $('#box').html(decodeURIComponent($(this).serialize()));//给当前form表单元素数据进行序列化，并进行//转码，结果是：sex=男/sex=女
    })
});

/**
 * 显示form表单进行序列化后的结果
 */
function showData() {
    var result = $("form").serialize();//form表单进行序列化，获取的是所有带有name属性的form表单元素的name和值
    $("#box").html(decodeURIComponent(result));//结果形如：userName=张三&userPass=iiiiiiN8&sex=男//&email=22@qq.com&address=河北
};

var FormSubmit = {};
$(function(){
    (function() {
        /**
         * 方法一
         */
        var button1 = $("form input[type=button]").eq(1);//或使用$("input:button").eq(1)
        //获取元素下标为1的按钮
        //$("form input[type=button]")[1]
        //和$("form input[type=button]").get(1) 都无法获取到
        //这是js获取集合中某一元素的方法；jquery中，需使用eq()方法
        button1.click(function(){//为第二个按钮绑定一个点击事件
            alert(1);
            //ajax提交form表单
            $.post("输入请求地址",encodeURI(encodeURI(decodeURIComponent($("form").serialize()))),function(result){
                alert(result);
            });
        });
        /**
         * 方法二
         * var button1 = $("form input:button")[1];
         * button1.onclick = function(){
         *    alert(1);
         *    $.post("输入请求地址",encodeURI(encodeURI(decodeURIComponent($("form").serialize()))),function(result){
         *        alert(result);
         *    });
         * }
         */        
    })();
});

　　需要特别注意的是：

1.网上许多都说明了$("form").serialize()方法可以序列化表单，但是并没有给出使用这种方法Ajax在提交form表单时后台接收到的中文乱码的问题，使用encodeURI(encodeURI(decodeURIComponent($("form").serialize())))这种方式可以解决中文参数乱码的问题，后台接收到的数据需要用java.net.URLDecoder.decode("接收到的数据","UTF-8")，再次进行转码即可。

2.如果传的参数，没有中文，则直接使用$("from").serialize()方法传递参数即可

html部分

<form action="#">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="userName" /></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="userPass" /></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <label><input type="radio" name="sex" value="男" checked="checked"/>男</label>
                <label><input type="radio" name="sex" value="女" />女</label>
            </td>
        </tr>
        <tr>
            <td>邮件:</td>
            <td><input type="text" name="email" /></td>
        </tr>
        <tr>
            <td>地址:</td>
            <td>
                <select name="address">
                    <option value="">---请选择省份---</option>
                    <option value="河南">河南</option>
                    <option value="河北">河北</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="显示表单数据" onclick="showData()"/></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="提交表单"/></td>
        </tr>
    </table>
</form>
<div id="box"></div>