jquery serialize() 方法通过序列化表单值创建 URL 编码文本字符串

时间:2018-11-14
本文章向大家介绍jquery serialize() 方法使用实例,需要的朋友可以参考一下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            //语法格式:$(selector).serialize()
            //您可以选择一个或多个表单元素(如输入和/或文本区),或表单元素本身。
            //序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
            $("#btn_serialize").click(function(){
                $("#myDiv1").text($("form").serialize());
            });
            //语法格式:$(selector).serializeArray()
            //serializeArray() 方法通过序列化表单值来创建对象(name 和 value)的数组。
            //您可以选择一个或多个表单元素(如输入和/或文本区),或表单元素本身。
            $("#btn_serializeArray").click(function(){
                x=$("form").serializeArray();
                $.each(x, function(i, field){
                    $("#myDiv2").append(field.name + ":" + field.value + "   ");
                });
            });
        });
    </script>
</head>
<body>
    <form action="">
    姓名: <input type="text" name="Name" value="XiaoHuzi" /><br>
    年龄: <input type="text" name="Age" value="26" /><br>
    工作: <input type="text" name="Job" value="IT" /><br>
    </form>
    <button type="button" id="btn_serialize">serialize</button