Ajax表单的序列化

一、.serialize( )

概述

将用作提交的表单元素的值编译成字符串。
不接受参数

注意: 只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性。此外，复选框（checkbox）和单选按钮（radio）(input 类型为 “radio” 或 “checkbox”)的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。

二、.serializeArray()

概述

序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。

注意： 此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

 [ 
     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
  ]

示例：弹出表单数据

注意：表单是用bootstrap写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单的序列化</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
</head>
<style> 
*{
    margin: 0;
    padding: 0;
}
.container{
    padding: 20px;
    width: 350px;
    height: 800px;
    border:1px solid palevioletred;
}

</style>
<body>
    <div class="container">
        <form >
            <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="name" name="name">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">年龄</label>
                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="age" name="age">
            </div>
           <div class="form-group">
             <label>性别：</label>
            <br/><label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" checked="checked" id="inlineRadio1" value="option1"> 女
                </label>
                <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 男
                </label>
           </div>
           <div class="form-group">
             <label>爱好：</label>
             <br/><label class="checkbox-inline">
                         <input type="checkbox" id="inlineCheckbox1" checked="checked" value="option1" name="check">  打游戏
                    </label>
                    <label class="checkbox-inline">
                             <input type="checkbox" id="inlineCheckbox2" value="option2" name="check"> 听音乐
                    </label>
                    <label class="checkbox-inline">
                         <input type="checkbox" id="inlineCheckbox3" value="option3" name="check"> 插花
                    </label> 

           </div>
           <div class="form-group">
            <label>学历：</label>
            <br/><select class="form-control" name="sect">
                    <option>专科</option>
                    <option>本科</option>
                    <option>研究生</option>
                    <option>博士</option>
                </select>
           </div>
           
           <button type="submit" class="btn btn-primary" id="submit">提交</button>
        </form>
        <p class="result"></p>
    </div>

</body>
<script>    
//点击 序列表表格内容为字符串，并弹出
 //   $("#submit").click(function(){
   //   alert( $("form").serialize())
 //   })
 //点击将用作提交的表单元素的值编译成拥有name和value对象组成的数组，并弹出
 $("#submit").click(function(){
        var formArray=$("form").serializeArray();
        for(i in formArray){
            
             alert(formArray[i].name+"\n"+formArray[i].value)
        }
    })
</script>
</html>

Ajax表单的序列化

文章目录

Ajax表单的序列化

一、.serialize( )

概述

二、.serializeArray()

概述

示例：弹出表单数据

猜你喜欢