serialize()方法和serializeArray()获取表单值
在Ajax异步传输过程中,客户端所发送的请求字符串格式必须是由“&”字符连接的多个名/值,当处理表单数据时,可以通过JQuery中的serialize()方法快速整理出所需的字符串格式。
布局源码:
<body><form action="#" method="post">姓名:<input type="text" name="user" /><br />性别:<input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="men" />女 <br/>年级:<select name="grade"><option value="1">一</option><option value="2">二</option><option value="3">三</option></select> <br />科目:<select name="kemu" size="6" multiple="multiple"><option value="yuwen">语文</option><option value="shuxue">数学</option><option value="waiyu">外语</option><option value="wuli">物理</option><option value="huaxue">化学</option><option value="jisuanji">计算机</option></select> <br />兴趣:<input type="checkbox" name="love" value="yundong" /> 运动<input type="checkbox" name="love" value="wenyi" />文艺<input type="checkbox" name="love" value="yinyue" /> 音乐<input type="checkbox" name="love" value="meishu" /> 美术<input type="checkbox" name="love" value="youxi" /> 游戏 <br/><input type="submit" value="提交_1" id="submit1" /><input type="submit" value="提交_2" id="submit2" /></form><p id="p1"> </p><p id="p2"> </p>
</body>
功能源码(javascript):
<script src="../Scripts/jquery-3.2.1.js" type="text/javascript"></script><script type="text/javascript">$(function () {
$("#submit1").click(function () {
$("#p1").html($("form").serialize());return false;});});</script><script type="text/javascript">$(function(){
$("#submit2").click(function () {
var array = $("input,select,:radio").serializeArray();var str = "[<br/>"for (var i = 0; i < array.length; i++) {str += " {"for (var name in array[i]) {str +=name+":"+array[i][name]+","}str = str.substring(0, str.length - 1);str += "<br/>]";}$("#p2").html(str);return false;});});</script>
结果截图:
html() 方法:返回或设置被选元素的内容 (inner HTML)。
serialize() 方法:通过序列化表单值,创建 URL 编码文本字符串。可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
serializeArray() 方法:序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。此方法返回的是 JSON 对象而非 JSON 字符串。返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。
来源:JQuery开发完全技术宝典 朱育发 岳阳 编写 中国铁道出版社
第九章:使用Ajax第9.8节预处理字符串