表单序列化 演示案例 ----> serialize()

输出标准的查询字符串：
a=1&b=2&c=3&d=4&e=5
注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

 

Demo1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单序列化</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>

</head>
<body>
<form action="" >
    <input type="text" name="name" value="请输入您的姓名">
    <input type="text" name="tel" value="请输入您的电话号码">
    <input type="text" name="adress" value="请输入您的地址">
    <input type="submit" value="提交">
</form>

    <script type="text/javascript">
        $('form').submit(function(){
            console.log($(this).serialize());
            return false;  //取消跳转
        }); 
    </script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------

Demo 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单序列化</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>

</head>
<body>
<form action="">
    <input type="text" name="name" value="请输入您的姓名">
    <input type="text" name="tel" value="请输入您的电话号码">
    <input type="text" name="adress" value="请输入您的地址">
</form>
<button>点击</button>
<div></div>

    <script type="text/javascript">
        $("button").click(function(){ 
            $("div").text($("form").serialize());
            console.log($("form").serialize())
        }); 
    </script>
</body>
</html>

 

posted @ 2015-04-26 14:03  Shimily  阅读(218)  评论(0)    收藏  举报