美文网首页
jquery.serializeJSON

jquery.serializeJSON

作者: 皮多堡 | 来源:发表于2017-10-17 11:49 被阅读0次
  • 在开发中请求后台经常提交form表单参数,我们可以用到JQuery的$("#form").serialize()来获取所有表单中的参数,但是这种方式是以字符串形式用&符拼接的,例如&name=jack$age=20 ,而我们经常又想通过JSON形式来提交,尤其是在集成第三方插件时,当然可以通过获取每一个form调单元素值手动一个一个拼接,完全没毛病,但当form表单数据很多时这种方式就显得很笨拙,因此推荐$('#form').serializeJSON();这种方式来操作:

github地址:https://github.com/marioizquierdo/jquery.serializeJSON

  1. 引入:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>
  1. 示例Demo:
<form id="my-profile">
  <!-- simple attribute -->
  <input type="text" name="fullName"              value="Mario Izquierdo" />

  <!-- nested attributes -->
  <input type="text" name="address[city]"         value="San Francisco" />
  <input type="text" name="address[state][name]"  value="California" />
  <input type="text" name="address[state][abbr]"  value="CA" />

  <!-- array -->
  <input type="text" name="jobbies[]"             value="code" />
  <input type="text" name="jobbies[]"             value="climbing" />

  <!-- textareas, checkboxes ... -->
  <textarea              name="projects[0][name]">serializeJSON</textarea>
  <textarea              name="projects[0][language]">javascript</textarea>
  <input type="hidden"   name="projects[0][popular]" value="0" />
  <input type="checkbox" name="projects[0][popular]" value="1" checked />

  <textarea              name="projects[1][name]">tinytest.js</textarea>
  <textarea              name="projects[1][language]">javascript</textarea>
  <input type="hidden"   name="projects[1][popular]" value="0" />
  <input type="checkbox" name="projects[1][popular]" value="1"/>

  <!-- select -->
  <select name="selectOne">
    <option value="paper">Paper</option>
    <option value="rock" selected>Rock</option>
    <option value="scissors">Scissors</option>
  </select>

  <!-- select multiple options, just name it as an array[] -->
  <select multiple name="selectMultiple[]">
    <option value="red"  selected>Red</option>
    <option value="blue" selected>Blue</option>
    <option value="yellow">Yellow</option>
    </select>
</form>

JavaScript:

$('#my-profile').serializeJSON();
  1. // returns =>
{
  fullName: "Mario Izquierdo",

  address: {
    city: "San Francisco",
    state: {
      name: "California",
      abbr: "CA"
    }
  },

  jobbies: ["code", "climbing"],

  projects: {
    '0': { name: "serializeJSON", language: "javascript", popular: "1" },
    '1': { name: "tinytest.js",   language: "javascript", popular: "0" }
  },

  selectOne: "rock",
  selectMultiple: ["red", "blue"]
}

这样就简单的多了。。。
还有一些其他用法,具体参考github相关用法介绍

相关文章

  • jquery.serializeJSON

    在开发中请求后台经常提交form表单参数,我们可以用到JQuery的$("#form").serialize()来...

网友评论

      本文标题:jquery.serializeJSON

      本文链接:https://www.haomeiwen.com/subject/zqlkuxtx.html