jQuery ajax - serializeArray() 方法 实例表单提交

serializeArray()在ajax表单提交时候非常方便获取元素

定义和用法

serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。

您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

语法

$(selector).serializeArray()

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

[
  {name: 'firstname', value: 'Hello'},
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

在from表单外的值也可以通过push添加name，value

var formdata = $("#viewpoint").serializeArray();
var content = {};
var html = $("#detail_desc").val();
content['name'] = 'content';
content['value'] = html;
formdata.push(content);

.serializeArray() 方法使用了 W3C 关于 successful controls（有效控件） 的标准来检测哪些元素应当包括在内。特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

该方法可以对已选择单独表单元素的对象进行操作，比如 <input>, <textarea>, 和 <select>。不过，更方便的方法是，直接选择 <form> 标签自身来进行序列化操作。

实例thinkphp6的前端

  1 <link rel="stylesheet" href="{$static}/css/managenment.css?version={$version}">
  2
  3 <link rel="stylesheet" type="text/css" href="{$static}/css/private.css?version={$version}">
  4 <!-- 导航 -->
  5 <div class="managenment">
  6     {include file="manager/menu"}
  7     <div class='release-right'>
  8         <p class='release-right-title'>发布观点</p>
  9         <div class='release-right-edit'>
 10             <form id="viewpoint">
 11                 <table class='tables'>
 12                     <tr>
 13                         <td>标题</td>
 14                         <td><input type="text" placeholder='请输入标题，字数不能大于50字' name="name"></td>
 15                     </tr>
 16                     <tr>
 17                         <td>简介</td>
 18                         <td><textarea name="desc" placeholder="请输入简介，字数不能大于70字"></textarea></td>
 19                     </tr>
 20                     <tr>
 21                         <td>封面</td>
 22                         <td class='covers'>
 23                             <img class="file gradient" src="{$static}/images/shangchuan.jpg" onclick="startFile()"
 24                                  id="img">
 25                             <input type="file" id="selectFile" onchange="uploadFile(this)" style="display: none;">
 26                             <p>尺寸：480*360 jpg / png格式</p>
 27                         </td>
 28                     </tr>
 29                     <input type="hidden" id="showImageValue" name="image" value="">
 30                     <tr>
 31                         <td><span class='eqs'>来源方式</span></td>
 32                         <td>
 33                             <div class="radio ralai">
 34                                 <input type="radio" id='ids' name="source" class='inputss' value="0" checked="checked">
 35                                 <label class='inputLable active' for='ids'>自创</label>
 36                             </div>
 37                             <div class="radio ralai">
 38                                 <input type="radio" id='securities' name="source" class='inputss' value="1">
 39                                 <label class='inputLable' for='securities'>其它</label>
 40                             </div>
 41                         </td>
 42                     </tr>
 43                     <tr>
 44                         <td>来源名称</td>
 45                         <td><input type="text" placeholder='请输入来源名称，字数不能大于50字' name="source_title"></td>
 46                     </tr>
 47                     <tr>
 48                         <td>评论权限</td>
 49                         <td>
 50                             <div class="radio" onclick="radioClick(this)">
 51                                 <input type="radio" name="comment_status" value="1" checked class="inputss">
 52                                 <label class="inputLable active">允许</label>
 53                             </div>
 54                             <div class="radio" onclick="radioClick(this)">
 55                                 <input type="radio" name="comment_status" value="0" class="inputss">
 56                                 <label class="inputLable">关闭</label>
 57                             </div>
 58                         </td>
 59                     </tr>
 60                     <tr>
 61                         <td>分类</td>
 62                         <td>
 63                             <select name="cate_id">
 64                                 <option value="">请选择分类</option>
 65                                 {foreach $type as $t}
 66                                 <option value="{$t.id}">{$t.title}</option>
 67                                 {/foreach}
 68                             </select>
 69                         </td>
 70                     </tr>
 71                     <tr>
 72                         <td style='vertical-align: top;'>标签</td>
 73                         <td class='lable-th'>
 74                             {foreach $tag as $tg}
 75                             <div class='checkeds'>
 76                                 <input type="checkbox" class='inputss' id='ids_{$tg.id}' value="{$tg.id}" name="tags[]">
 77                                 <label for="ids_{$tg.id}">{$tg.title}</label>
 78                             </div>
 79                             {/foreach}
 80                         </td>
 81                     </tr>
 82                 </table>
 83                 <div class='release-cont'>
 84                     <span>内容</span>
 85                     <textarea id="detail_desc" name="content" lay-verify="content"></textarea>
 86                 </div>
 87                 <div class='btnss'>
 88                     <div class='btns-lt' onclick="submitData(0)">发布</div>
 89                     <div class='btns-rt' onclick="submitData(-1)">保存到草稿箱</div>
 90                 </div>
 91             </form>
 92
 93         </div>
 94     </div>
 95     <div class='clear'></div>
 96 </div>
 97 </body>
 98 <script src="{$static}/js/main.js?version={$version}"></script>
 99 <script>
100     var editor;
101     var html;
102     KindEditor.ready(function (K) {
103         editor = K.create('#detail_desc', {
104             width : '700px',
105             height:'401px',
106         });
107     });
108     $(function () {
109         $(".radio").click(function () {
110             var num = $(".radio").index(this);
111             $(this).children("label").addClass("active").parent(".radio").siblings().children('label').removeClass("active");
112             $(".lables").eq(num).removeClass("clas").siblings().addClass('clas');
113
114         });
115         $(".lable-th label").click(function () {
116             var index = $(this).index();
117             if ($(this).hasClass('active')) {
118                 $(this).removeClass('active');
119                 $(this).children('img').remove();
120             } else {
121                 $(this).addClass('active').append("<img src='{$static}/images/biaoqian-icon.png'>");
122             }
123         })
124     })
125
126     function submitData(type) {
127         editor.sync();
128         var formdata = $("#viewpoint").serializeArray();
129         if (type == 0){
130             var backVal = checkdata(formdata);
131             if (!backVal) {
132                 return false;
133             }
134         }
135         var content = {};
136         var submit_type = {};
137         var html = $("#detail_desc").val();
138         submit_type['name'] = 'submit_type';
139         submit_type['value'] = type;
140         content['name'] = 'content';
141         content['value'] = html;
142         formdata.push(content);
143         formdata.push(submit_type);
144         $.post("/viewpoint/create", formdata, function (result) {
145             if (result.code == 200) {
146                 if (type == -1){
147                     showTips("保存成功");
148                 }else{
149                     showTips("发布成功");
150                 }
151                setTimeout(function (){location.reload();},100)
152             } else {
153                 showTips(result.msg);
154             }
155         });
156     }
157
158     function startFile() {
159         $("#selectFile").click();
160     }
161
162     function uploadFile(file) {
163         var formData = new FormData();
164         formData.append("file", file.files[0]);
165         console.log(formData);
166         $.ajax({
167             url: '/upload/image',
168             dataType: 'json',
169             type: 'POST',
170             data: formData,
171             processData: false, // 使数据不做处理
172             contentType: false, // 不要设置Content-Type请求头
173             success: function (result) {
174                 if (result.code == 200) {
175                     $("#img").attr("src", result.data.src);
176                     $("#showImageValue").val(result.data.src);
177                 } else {
178                     showTips(result.msg);
179                 }
180             },
181             error: function (response) {
182                 showTips(response.message);
183                 isUpload = false;
184             },
185         });
186     }
187
188     function checkdata(data) {
189         var values = [];
190         for (var property in data) {
191             values[data[property]['name']] = data[property]['value'];
192         }
193         if (values['name'] == '') {
194             showTips("请填写观点标题")
195             return false;
196         }
197         if (!values['desc']) {
198             showTips('请填写观点简介');
199             return false;
200         }
201         if (values['cate_id'] == '') {
202             showTips('请选择观点分类');
203             return false;
204         }
205         if (values['tags[]'] == '') {
206             showTips('请选择观点标签');
207             return false;
208         }
209         if (values['content'] == '') {
210             showTips('请填写观点内容');
211             return false;
212         }
213         return true;
214     }
215 </script>
216 </html>