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>
