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

JQuery中serialize()实例

 

  1. <script type="text/javascript">
  2.           $("#admin-role-save").click(function(){
  3.             alert($("#form-admin-role-add").serialize());
  4.           });
  5. </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>
  35.                             </dl>
  36.                             <dl class="cl permission-list2">
  37.                                 <dt>
  38.                                     <label class=""> <input type="checkbox" value="2"
  39.                                         name="user_status2" id="user-Character-0-1">
  40.                                         文章管理(状态码2)
  41.                                     </label>
  42.                                 </dt>
  43.                             </dl>
  44.                         </dd>
  45.                     </dl>
  46.                     <dl class="permission-list">
  47.                         <dt>
  48.                             <label> <input type="checkbox" value=""
  49.                                 name="user-Character-0" id="user-Character-1"> 用户中心
  50.                             </label>
  51.                         </dt>
  52.                         <dd>
  53.                             <dl class="cl permission-list2">
  54.                                 <dt>
  55.                                     <label class=""> <input type="checkbox" value="4"
  56.                                         name="user_status4" id="user-Character-1-0">
  57.                                         用户管理(状态码4)
  58.                                     </label>
  59.                                 </dt>
  60.                             </dl>
  61.                         </dd>
  62.                     </dl>
  63.                 </div>
  64.             </div>
  65.             <div class="row cl">
  66.                 <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
  67.                     <button type="submit" class="btn btn-success radius"
  68.                         id="admin-role-save" name="admin-role-save">
  69.                         <i class="icon-ok"></i> 确定
  70.                     </button>
  71.                 </div>
  72.             </div>
  73.         </form>

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

效果如下:jQuery ajax - serialize() 方法(这个是AJAX常用的序列化)

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

 

详细说明:

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

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

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

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

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

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


			
腾讯云服务器安全可靠高性能,多种配置供您选择
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: