RSS订阅
当前位置：Java爱好者 > 前端开发 > 正文

jQuery ajax – serialize() 方法（这个是AJAX常用的序列化）

  • 遨游死神 发布于 2017-09-18
  • 分类：前端开发
  • 阅读(1179)

JQuery中serialize()实例

 

  1. <script type=“text/javascript”>
  3.           $(“#admin-role-save“).click(function(){
  4.             alert($(“#form-admin-role-add“).serialize());
  5.           });
  7. </script>

这个就是把这个id=form-admin-role-add 的表单内容序列化

这个就是我的一个静态页面form

  1. <form action=“” method=“post” class=“form form-horizontal”
  2.             id=“form-admin-role-add“>
  3.             <div class=“row cl”>
  4.                 <label class=“form-label col-xs-4 col-sm-3”><span
  5.                     class=“c-red”>*</span>角色名称：</label>
  6.                 <div class=“formControls col-xs-8 col-sm-9”>
  7.                     <input type=“text” class=“input-text” value=“” placeholder=“”
  8.                         id=“roles_name” name=“roles_name”>
  9.                 </div>
  10.             </div>
  11.             <div class=“row cl”>
  12.                 <label class=“form-label col-xs-4 col-sm-3”>备注：</label>
  13.                 <div class=“formControls col-xs-8 col-sm-9”>
  14.                     <input type=“text” class=“input-text” value=“” placeholder=“” id=“roles_mark”
  15.                         name=“roles_mark”>
  16.                 </div>
  17.             </div>
  18.             <div class=“row cl”>
  19.                 <label class=“form-label col-xs-4 col-sm-3”>网站角色：</label>
  20.                 <div class=“formControls col-xs-8 col-sm-9”>
  21.                     <dl class=“permission-list”>
  22.                         <dt>
  23.                             <label> <input type=“checkbox” value=“”
  24.                                 name=“user-Character-0” id=“user-Character-0”> 资讯管理
  25.                             </label>
  26.                         </dt>
  27.                         <dd>
  28.                             <dl class=“cl permission-list2”>
  29.                                 <dt>
  30.                                     <label class=“”> <input type=“checkbox” value=“1”
  31.                                         name=“user_status1” id=“user-Character-0-0”>
  32.                                         栏目管理(状态码1)
  33.                                     </label>
  34.                                 </dt>
  36.                             </dl>
  37.                             <dl class=“cl permission-list2”>
  38.                                 <dt>
  39.                                     <label class=“”> <input type=“checkbox” value=“2”
  40.                                         name=“user_status2” id=“user-Character-0-1”>
  41.                                         文章管理(状态码2)
  42.                                     </label>
  43.                                 </dt>
  45.                             </dl>
  46.                         </dd>
  47.                     </dl>
  48.                     <dl class=“permission-list”>
  49.                         <dt>
  50.                             <label> <input type=“checkbox” value=“”
  51.                                 name=“user-Character-0” id=“user-Character-1”> 用户中心
  52.                             </label>
  53.                         </dt>
  54.                         <dd>
  55.                             <dl class=“cl permission-list2”>
  56.                                 <dt>
  57.                                     <label class=“”> <input type=“checkbox” value=“4”
  58.                                         name=“user_status4” id=“user-Character-1-0”>
  59.                                         用户管理(状态码4)
  60.                                     </label>
  61.                                 </dt>
  62.                             </dl>
  63.                         </dd>
  64.                     </dl>
  65.                 </div>
  66.             </div>
  67.             <div class=“row cl”>
  68.                 <div class=“col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3”>
  69.                     <button type=“submit” class=“btn btn-success radius”
  70.                         id=“admin-role-save“ name=“admin-role-save”>
  71.                         <i class=“icon-ok”></i> 确定
  72.                     </button>
  73.                 </div>
  75.             </div>
  76.         </form>

然后我在页面中写入内容后让他跳出 上面已经在js里写了alert();

效果如下：

成功显示说明我们代码没问题，这段弹出的字符串就是我们序列化的数据，也是我们需要给后台提交的数据。

 

详细说明：

为何有很多奇怪的%E8等，因为他自动把中文转义了，作为开发看这个应该不会奇怪。

必须用上JQuery，也是前端的活。

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

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

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。


						        	
未经允许不得转载：Java爱好者 » jQuery ajax – serialize() 方法（这个是AJAX常用的序列化）
		

				

			赞 (0)				            打赏
	        					


				
		

					


				

						
作者：遨游死神

			
为了我的梦想而努力,不管结果怎样.

		

		
		

				
相关推荐
							




	

最新文章