JQuery_Ajax预处理字符串serialize()方法获取表单值

serialize()方法和serializeArray()获取表单值

在Ajax异步传输过程中&＃xff0c;客户端所发送的请求字符串格式必须是由“&”字符连接的多个名/值&＃xff0c;当处理表单数据时&＃xff0c;可以通过JQuery中的serialize()方法快速整理出所需的字符串格式。

布局源码&＃xff1a;

"#" method&＃61;"post">姓名&＃xff1a;type&＃61;"text" name&＃61;"user" />
性别&＃xff1a;type&＃61;"radio" name&＃61;"sex" value&＃61;"man" checked&＃61;"checked" />男type&＃61;"radio" name&＃61;"sex" value&＃61;"men" />女
年级&＃xff1a;"grade"><option value&＃61;"1">一option><option value&＃61;"2">二option><option value&＃61;"3">三option>
科目&＃xff1a;"kemu" size&＃61;"6" multiple&＃61;"multiple"><option value&＃61;"yuwen">语文option><option value&＃61;"shuxue">数学option><option value&＃61;"waiyu">外语option><option value&＃61;"wuli">物理option><option value&＃61;"huaxue">化学option><option value&＃61;"jisuanji">计算机option>
兴趣&＃xff1a;type&＃61;"checkbox" name&＃61;"love" value&＃61;"yundong" /> 运动type&＃61;"checkbox" name&＃61;"love" value&＃61;"wenyi" />文艺type&＃61;"checkbox" name&＃61;"love" value&＃61;"yinyue" /> 音乐type&＃61;"checkbox" name&＃61;"love" value&＃61;"meishu" /> 美术type&＃61;"checkbox" name&＃61;"love" value&＃61;"youxi" /> 游戏
type&＃61;"submit" value&＃61;"提交_1" id&＃61;"submit1" />type&＃61;"submit" value&＃61;"提交_2" id&＃61;"submit2" />

"p1">

"p2">

功能源码&＃xff08;Javascript&＃xff09;&＃xff1a;

<script src&＃61;"../Scripts/jquery-3.2.1.js" type&＃61;"text/Javascript">script><script type&＃61;"text/Javascript">$(function () {$("#submit1").click(function () { $("#p1").html($("form").serialize());return false;});});script><script type&＃61;"text/Javascript">$(function(){$("#submit2").click(function () {var array &＃61; $("input,select,:radio").serializeArray();var str &＃61; "[
"for (var i &＃61; 0; i " {"for (var name in array[i]) {str &＃43;&＃61;name&＃43;":"&＃43;array[i][name]&＃43;","}str &＃61; str.substring(0, str.length - 1);str &＃43;&＃61; "
]";}$("#p2").html(str);return false;});});script>

结果截图&＃xff1a;

html() 方法&＃xff1a;返回或设置被选元素的内容 (inner HTML)。

serialize() 方法&＃xff1a;通过序列化表单值&＃xff0c;创建 URL 编码文本字符串。可以选择一个或多个表单元素&＃xff08;比如 input 及/或 文本框&＃xff09;&＃xff0c;或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

serializeArray() 方法&＃xff1a;序列化表单元素&＃xff08;类似 .serialize() 方法&＃xff09;&＃xff0c;返回 JSON 数据结构数据。此方法返回的是 JSON 对象而非 JSON 字符串。返回的 JSON 对象是由一个对象数组组成的&＃xff0c;其中每个对象包含一个或两个名值对 —— name 参数和 value 参数&＃xff08;如果 value 不为空的话&＃xff09;。

来源&＃xff1a;JQuery开发完全技术宝典 朱育发 岳阳 编写 中国铁道出版社
第九章&＃xff1a;使用Ajax第9.8节预处理字符串