jquery解析表单数据的方法
<body>
<%--查询的表单--%>
<form id="search-form" >
用户名: <input name="userName" >
<input name="pageIndex" type="hidden" >
<input name="pageSize" type="hidden">
<input type="button" id="btn-search" value="查询">
</form>
<%--显示所有用户信息的表格--%>
<div>
<a href="javascript:void(0)" class="add-user">添加用户</a>
</div>
<%--用于添加用户信息的表单--%>
<form id="add-form" style="display: none">
用户名: <input type="text" name="userName"> <br>
密码: <input type="text" name="password"> <br>
邮箱: <input type="text" name="email"> <br>
<input type="button" value="添加" id="btn-add">
<input type="reset" value="重置">
</form>
<script src="js/jquery-1.12.4.js"></script>
<script>
// 点击添加按钮的时候
$("#btn-add").click(function () {
// 获取用户输入的数据
// var obj = $("#add-form").serializeArray();
// console.info("serializeArray() ==> ",obj);
// var paramResult = $.param(obj);
// console.info("param(obj) ==> ",paramResult);
var obj2 = $("#add-form").serialize();
console.info("serialize() ==> ",obj2);
$.ajax({
url:'adduser',
type:'POST',
data:obj2,
dataType:'json',
/*
* {
* code: 0 // 为0表示成功,其他值表示失败
* message: "xxx" // 失败时的提示信息
* data: {...} // 成功时会返回的数据
* }
*
* */
success:function (data) {
if(data.code == 0){
alert('添加成功');
// 清空用户输入的数据
$('#add-form')[0].reset();
// 隐藏添加用户的表单
$('#add-form').hide();
}else {
alert(data.message);
}
},
error:function () {
}
});
});
serializeArray+param = serialize;
// var obj = $("#add-form").serializeArray();
// console.info("serializeArray() ==> ",obj);
// var paramResult = $.param(obj);
// console.info("param(obj) ==> ",paramResult);
var obj2 = $("#add-form").serialize();
console.info("serialize() ==> ",obj2);
jquery的.serilizeArray从一组表单元素中检测有效控件。
- 元素不能被禁用
- 元素必须有name属性
- 选中的checkbox才是有效的
- 选中的radio才是有效的
- 只有触发提交事件的submit才是有效的
- file元素不会被序列化
由formData对象来进行发送file元素
<body>
<form action="upload" method="post">
文件:<input type="file" name="pic" id="pic">
<input type="button" value="上传" id="btn-upload">
</form>
<script src="js/jquery-1.12.4.js"></script>
<script>
$("#btn-upload").click(function () {
let formData = new FormData();
formData.append("pic", $("#pic")[0].files[0]);
$.ajax({
url: "/upload",
data: formData,
type: "POST",
dataType: "json",
processData:false,
contentType:false,
success: function (response) {
if (response.code == 0) {
alert("上传成功");
console.log(response.data);
} else {
alert(response.message);
}
},
error: function () {
alert("服务器异常")
}
})
})
</script>
</body>