<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>form表单序列化</title>
<style type="text/css">
label {
font-size: 14px;
color:#333;
line-height: 40px;
display:block;
}
form {
width:400px;
height:400px;
margin:100px auto;
padding:20px;
border:1px #ccc solid;
}
</style>
</head>
<body>
<form action="">
<label>姓名:<input type="text" name="username"/></label>
<label>年龄:<input type="number" name="age"/></label>
<label>邮箱:<input type="email" name="email"/></label>
<label><input type="button" name="button" value="提交" /></label>
<label><input type="reset" name="reset"/></label>
<button class="btn">serari</button>
<p id="oop"></p>
</form>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// serialize方法:
$('input[type="button"]').on('click',function () {
alert($('form').serialize())
})
// serializeArray方法:
var formObj = JSON.stringify($('form').serializeArray());
var arr = JSON.parse(formObj);
$('#oop').append(formObj);
arr.forEach(function (index,val) {
document.getElementById('oop').innerText += index.name;
})
</script>
</body>
</html>
复制代码
表单序列化之serialize && serializeArray
最新推荐文章于 2024-08-31 20:02:26 发布