关于form表单
2017-10-20 本文已影响0人
该昵称注册中
关于form表单的几种提交方式
1.隐藏form提交，更新数据完成后，需要转到一个空白页面再对原页面进行提交后处理,用iframe避免跳转；ajax则不用，可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。
ajax 可以用formData提交图片
在jquery中有serialize()和serializeArray()序列化表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于form表单的几种提交方式</title>
</head>
<body>
<!--用target=“” 对应的iframe name=“”接受请求完成后的值 避免新打开一个页面跳转-->
<form action="http://test/jsonList" method="post" onsubmit="return checkFrom()" enctype="multipart/form-data" id="subForm" target="target_1">
<label for="userName">姓名:</label><input id="userName" name="userName">
<label for="password">密码:</label><input type="password" id="password" name="password">
<!-- 网上说 点击type为image submit botton 的都会触发onsubmit从而提交 -->
<!-- 但是经过测试我发现 type为botton并不会触发onsubmit和submit 但是不写type='button'就会触发提交
而type为image时 会直接跳转到action地址 不会触发onsubmit事件
点击<a></a>跳转时 会直接跳转到action地址 不会触发onsubmit事件
form表单通常由type="submit"的按钮触发 从点击到提交一共有两个方法被触发 1:onsubmit(); 1:submit();
所以在触发submit事件前还要 人为触发校验事件
-->
<!-- 在form表单里面的图片用背景图片 不会点击提交 或者 onclick="return false"不让其触发-->
<input type="image" src="submit.png" onclick="return false">
<span style="background:url(submit.png) no-repeat no-repeat;width: 100%;height: 100%">不会提交</span>
<input type="submit" name="login" value="登录">
<input type="button" name="loginin" value='提交'>
<input type="file" name="file" id="file" style="width: 120px">
<button>button不加type='button'会提交</button>
<a onclick="submitMe()">点击我提交</a>
</form>
<iframe id="target_1" name="target_1"></iframe>
</body>
<script type="text/javascript" src="../../../assets/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../../assets/js/mock.js"></script>
<script type="text/javascript" src="../../../mockTest/jquery-mock1.js"></script>
<script type="text/javascript">
/*checkFrom返回true/false true为提交 false为不提交*/
$.fn.formDataToJson = function () {
var serializeObj = {};
$(this.serializeArray()).each(function () {
serializeObj[this.name] = this.value;
});
return serializeObj;
};
function getData() {
$.ajax({
url:'http://test/jsonList',
dataType:'json',
success:function (data) {
}
})
}
getData()
function checkFrom(){
var userName = document.getElementsByName("userName")[0].value;
var password = document.getElementsByName("password")[0].value;
if(!userName){
return false;
}
if(!password){
return false;
}
var arr = $("#subForm").serialize(); //序列化为userName=wee&password=www
var arrSer = $("#subForm").serializeArray();
//得到[{{name: "userName", value: "wee"}},{name: "password", value: "www"}]
var jsonObj = $("#subForm").formDataToJson();//得到 {userName: "wee", password: "www"}
debugger
return true;
}
function submitMe(){
if(checkFrom()){
document.getElementById("subForm").submit();
}
}
$("#target_1").load(function (data) {
})
$("#file").on("change",function () {
//必须用这个
var fileM=document.querySelector("#file");
/*var fileM = $("#file");*/
var fileObj = fileM.files[0];
var formData = new FormData();
formData.append("file",fileObj)
})
</script>
</html>
后台返回
regMap.put("success", true);
regMap.put("message", {});//
response.getWriter().write(JsonUtils.mapToJon(regMap));
