serializeArray()方法怎么用

发布时间:2022-03-05 11:12:11 作者:小新
来源:亿速云 阅读:305

这篇文章主要介绍了serializeArray()方法怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

    .serializeArray()方法使用标准的W3C"successful controls"的标准来检测哪些元素应当包括在内。被禁用的元素不会被包括在内。并且,元素必须含有 name 属性。此外,提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

    .serializeArray() 方法可以对单独选择的表单元素对象进行操作, 比如 <input>, <textarea>, 和 <select>。还有个更方便的方法是,直接使用 <form> 标签来进行序列化操作:

$('form').submit(function() {

  console.log($(this).serializeArray());

  return false;

});

    这将产生以下数据结构(浏览器提供的console.log):

[

  {

    name: "a",

    value: "1"

  },

  {

    name: "b",

    value: "2"

  },

  {

    name: "c",

    value: "3"

  },

  {

    name: "d",

    value: "4"

  },

  {

    name: "e",

    value: "5"

  }

]

例子:

从表单获取值,遍历并且显示他们

<!DOCTYPE html>

<html>

<head>

  <style>

  body, select { font-size:14px; }

  form { margin:5px; }

  p { color:red; margin:5px; }

  b { color:blue; }

  </style>

  <script src="https://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <p><b>Results:</b> <span id="results"></span></p>

  <form>

    <select name="single">

      <option>Single</option>

      <option>Single2</option>

    </select>

    <select name="multiple" multiple="multiple">

      <option selected="selected">Multiple</option>

      <option>Multiple2</option>

      <option selected="selected">Multiple3</option>

    </select><br/>

    <input type="checkbox" name="check" value="check1" id="ch2"/>

    <label for="ch2">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch3"/>

    <label for="ch3">check2</label>

    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>

    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>

  </form>

<script>

  function showValues() {

    var fields = $(":input").serializeArray();

    $("#results").empty();

    jQuery.each(fields, function(i, field){

      $("#results").append(field.value + " ");

    });

  }

  $(":checkbox, :radio").click(showValues);

  $("select").change(showValues);

  showValues();

</script>

</body>

</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“serializeArray()方法怎么用”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. Servlet和Jsp知识点都有哪些呢
  2. Spring 中@transactional 如何使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

serializearray()

上一篇:ajaxSend()注意事项有哪些

下一篇:如何使用callbacks.has()的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》