JS Serialize() 方法,对表单进行序列化操作
1.serialize()方法
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法:
$("#id").serialize();
for example:表单
<form class="login-form" id="adminInfo" novalidate >
<!--输入框-->
<div class="input-content">
<!--autoFocus-->
<div>
<input type="text" autocomplete="off"
placeholder="用户名" name="adminName" id="adminName" required/>
</div>
<div style="margin-top: 16px">
<input type="password"
autocomplete="off" placeholder="登录密码" name="adminPassword" id="adminPassword" required maxlength="32"/>
</div>
</div>
<!--登入按钮-->
<div style="text-align: center">
<button type="button" class="enter-btn" onclick="checkAdmin()" >登录</button>
</div>
<div class="foor">
<div class="left"><span>忘记密码 ?</span></div>
<div class="right"><span>注册账户</span></div>
</div>
</form>
serialize()方法的实现:
<script>
function checkAdmin() {
const datas = $("#adminInfo").serialize();
alert(datas)
</script>
总结:
通过使用这个方法,表单的数据会已aminName=11&adminPassword=aa
json格式进行传递。这样在控制层获取是可以直接Admin admin,得到全部的信息,十分方便。
注意:使用js方法时,需要导入js包,一些在线的js包参考如下:
<script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.4.1.js"></script>