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>