form表单提交和跳转
1.表单提交
submit() ⽅法触发 submit 事件，或规定当发⽣ submit 事件时运⾏的函数。$(selector).submit(function)
使⽤ preventDefault() 函数来阻⽌对表单的提交。
ajaxSubmit()提交表单，使⽤第三⽅插件jquery.form实现；
通常情况下，我们直接通过form提交的话，提交后当前页⾯跳转到form的action所指向的页⾯。然⽽，很多时候我们⽐不希望提交表单后页⾯跳转，那么，我们就可以使⽤ajaxSubmit(obj)来提交数据。
这⾥涉及到表单的同步提交和异步提交。本⽂不赘述。
$('button').on('click', function() {
$('form').on('submit', function() {
var title = $('inpur[name=title]').val(),
content = $('textarea').val();
$(this).ajaxSubmit({
type: 'post', // 提交⽅式 get/post
url: 'your url', // 需要提交的 url
data: {
'title': title,
'content': content
},
success: function(data) { // data 保存提交后返回的数据，⼀般为 json 数据
// 此处可对 data 作相关处理
alert('提交成功！');
}
$(this).resetForm(); // 提交后重置表单
});
return false; // 阻⽌表单⾃动提交事件，必须返回false，否则表单会⾃⼰再做⼀次提交操作，并且页⾯跳转
});
});
如果要提交之后返回数据再触发ajax异步交互（实际就是⼀个按钮触发两个事件，后⼀个事件要等前⼀个事件完成的情况才触发）
$("#uploadImage").on("submit",function () { //触发form表单提交，url写在form标签
$("#uploadImage").ajaxSubmit(options); // form表单提交后触发
return false; // 必须返回false，否则表单会⾃⼰再做⼀次提交操作，并且页⾯跳转
});
var options = {
//target: '#picSrc',          //把服务器返回的内容放⼊id为picSrc的元素中
//beforeSubmit: function({
}),  //提交前的回调函数
success:function (backData) { //提交后的回调函数
var sendData={
"srcImageFile":backData.serviceIcon,
"result":backData.serviceIcon,
};
$.ajax({
url:"/Wisdom/smartCampus/service/cutPicture",//交互地址
type:"post",//⽅法
//dataType:"json",
contentType:"application/json",//头部
data:JSON.stringify(sendData),//数据
success:function (backData) {
$("#uploadImage").resetForm();//重置表单
}
})
},
timeout: 3000              //限制请求的时间，当请求⼤于3秒后，跳出请求
};
jQuery.form.js⽤法
参考链接：感谢
相关js：
jquery form是⼀个表单异步提交的插件，可以很容易提交表单，设置表单提交的参数，并在表单提交前对表单数据进⾏校验和处理和表单提交后的函数调⽤。
表单代码：
<form id="form1" method="get" action="/day09/jqueryFormServlet">
姓名:<input name="name" id="name" class="specialFields"><br>
年龄:<input name="age" id="age" type="number" class="specialFields"><br>
地址:<input name="address" id="address"><br>
兴趣:<p>
h1:<input type="checkbox" name="hobby" value="h1" checked="checked">
h2:<input type="checkbox" name="hobby" value="h2">
h3:<input type="checkbox" name="hobby" value="h3">
h4:<input type="checkbox" name="hobby" value="h4">
</p>
性别:
男:<input type="radio" name="sexuality" value="man" checked="checked"><br>
⼥:<input type="radio" name="sexuality" value="girl"><br>
<input type="submit" value="submit1" id="sub1">
<input type="submit" value="submit2" id="sub2">
<div id="p1">p</div>
</form>
这个插件有两个主要⽅法：
ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能；
他们都可以接受0个或⼀个参数，参数可以为⼀个函数或者⼀个JS对象，类似json格式；
ajaxForm（）不能提交表单，只是为表单提交做准备：
①：传⼊函数
$("#form1").submit(function () {jquery是什么选择器
$('#form1').ajaxForm(function () {
alert("提交成功2")
})
})
但是虽然我看了很多博客都是这样写，我实际代码运⾏之后发现，“提交成功2”并没有打印，也就是函数没有进去，
⽽且提交后，页⾯会跳转到action的地址，也就是说，这个⽅法不能实现表单的异步提交，只是为表单提交做准备，但传⼊⼀个函数的⽅式不适合这个⽅法，因为没有进去，不知道是不是我写的有问题。但是如果传⼊⼀个option是对象，就能⽣效。
var options= {
url: "/day09/jqueryFormServlet", //提交地址：默认是form的action，如果申明，则会覆盖
type: "post", //默认是form的method（get or post），如果申明，则会覆盖
beforeSubmit: beforeCheck, //提交前的回调函数
success: successfun, //提交成功后的回调函数
target: "#output", //把服务器返回的内容放⼊id为output的元素中
dataType: "json", //html(默认), xml, script, 接受服务端返回的类型
clearForm: true, //成功提交后，是否清除所有表单元素的值
resetForm: true, //成功提交后，是否重置所有表单元素的值
timeout: 3000 //限制请求的时间，当请求⼤于3秒后，跳出请求
};
②：传⼊⼀个js对象
$('#form1').ajaxForm(options)
ajaxSubmit（）⽅法：实现表单的异步提交
$("#form1").submit(function () {
$('#form1').ajaxSubmit(function () {
alert("提交成功2")
})
return false;
})
这⾥必须返回false，不然表单会提交两次，因为异步提交⼀次，默认提交⼀次；
$('#form1').ajaxSubmit(options)
但如果传⼊options对象则只会提交⼀次，⽬前我不知道什么原理。
//表单提交前，数据校验
/*
* formData：表单元素数组对象，数组⾥⾯每⼀个元素都是⼀个<input>元素，可以通过.name、.value的⽅式访问元素
* 提交表单时，Form插件会以Ajax⽅式⾃动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
* form: jQuery对象，封装了表单的元素
* options: options对象
* */
function beforeCheck(formData, form, options) {
//利⽤formData校验
//$.param(formData) 可以和formSerialize⽅法⼀样，实现表单元素的序列化
var queryString = $.param(formData);
$("#p1").html(queryString + "<br>")
for (var i = 0; i < formData.length; i++) {
//打印每⼀个元素的name属性和value值
//alert(formData[i].name + " " + formData[i].value)
}
//利⽤form校验
var formDom = form[0];
/
/formDom是jQuery表单对象，感觉类似数组，可以通过下标访问元素
//⽐如：formDom[0].targetName 表⽰元素标签名，INPUT
var name = formDom["name"].value;//这⾥寻name为name或者id为name的元素的值
var age = formDom["age"].value;
alert(name+" "+age)
if (!name || !age) {
alert("name age 不能为空")
}
//利⽤fieldValue校验
//返回选择元素的value值，是⼀个数组
var name = $("input[name='name']").fieldValue();
var hobby = $("input[name='hobby']").fieldValue();
if (!name[0] || !hobby[0]) {
alert("必须填姓名和选择兴趣")
}
//把表单的元素序列化，：name=姓名&age=年龄；以字符串的⽅式拼接所有表单元素
var formSerializeStr = $("#form1").formSerialize();
alert(formSerializeStr)
//序列化某些表单元素 $("#form1 .ss")通过选择器选择某些元素
//这⾥就是选择表单⾥⾯，有specialFields样式的元素；但是这⾥我⽤属性选择器没有⽣效，⽐如$("#form1[name='name']")
var formSerializeStr = $("#form1 .specialFields").fieldSerialize();
alert(formSerializeStr)
return true;//如果return false，则校验不通过，表单不会提交
}
function successfun(data, status) {
//data是提交成功后的返回数据，status是提交结果⽐如success
//返回数据的类型是通过options对象⾥⾯的dataType定义的，⽐如json、xml，默认是html
//这⾥data.success是因为我后天返回的json数据的⼀个属性 String jsonText = "{'success':'提交成功'}";
alert(data.success + " " + status)
}
⼀、jQuery.Form.js 配置选项options
选项说明
url 表单提交数据的地址
type form提交的⽅式(method:post/get)
target 服务器返回的响应数据显⽰在元素(Id)号
beforeSerialize: function($form, options) 表单数据被序列化之前执⾏的回调函数，如果在内部return false将终⽌序列化和提交。
beforeSubmit: function(arr, $form, options) 表单数据被序列化成arr数组，并且在提交前触发的回调函数。
error 提交失败执⾏的回调函数
success 提交成功后执⾏的回调函数
data 除了表单数据外，还需要额外提交到服务器的数据
iframe 如果有<input type="file">是否应该使⽤iframe来上传⽂件(对旧版本浏览器⽽⾔)
iframeSrc 为<iframe>元素设定src属性值
iframeTarget 如果你想⽤⾃⼰的iframe来上传⽂件，可以将Id传给这个属性
dataType 期望服务器返回数据类型
clearForm 提交成功后是否清空表单中的字段值
restForm 提交成功后是否重置表单中的字段值，即恢复到页⾯加载时的状态
timeout 设置请求时间，超过该时间后，⾃动退出请求，单位(毫秒)
forceSync
semantic
uploadProgress
⼆、可操作函数
函数说明
ajaxForm 提交表单与ajaxSubmit的区别在于是否触发浏览器的提交。
ajaxSubmit 提交表单
formSerialize 序列化表单
fieldSerialize 序列化字段
fieldValue 返回某个input的字段值
resetForm 重置表单为打开页时的状态
clearForm 清空表单的所有值
clearFields 清空某个字段值
1 引⼊ jQuery.js 和 jquery-form.js：
<script src="sources/jquery-1.9.1.js"></script>
<script src="sources/jquery-form.js"></script>
2 HTML ⾥写的代码就是很普通的表单控件：
<div id="showForm">
<form action="/postform" method="post" id="ajaxForm"><!--postform 是⽤于提交的地址-->
<input type="text" name="user">
<input type="number" name="age">
<button type="submit">提交</button>
</form>
</div>
3 js 代码：
重点就是 js 代码的部分了，这是实现表单提交之后的显⽰的！
<script>
$( //页⾯加载完执⾏
$("#ajaxForm").on("submit",function () { //表单提交时监听提交事件
$(this).ajaxSubmit(options); //当前表单执⾏异步提交，optons 是配置提交时、提交后的相关选项
return false; // 必须返回false，才能跳到想要的页⾯
})
)
//配置 options 选项
var options = {
url: "/postform", //提交地址：默认是form的action，如果申明，则会覆盖
type: "post", //默认是form的method（get or post），如果申明，则会覆盖
success: successFun, //提交成功后的回调函数，即成功后可以定页⾯跳到哪⾥
dataType: "json", //接受服务端返回的类型
clearForm: true, //成功提交后，清除所有表单元素的值
resetForm: true, //成功提交后，重置所有表单元素的值
timeout: 3000 //设置请求时间，超过该时间后，⾃动退出请求，单位(毫秒)
}
//设置提交成功后返回的页⾯
function successFun(data,status) {
$("#showForm").html(data.msg); //提交表单后从后台接收到的返回来的数据，我保存到了msg⾥
// $("#showForm").html("或者这⾥可以直接写想要显⽰的内容")
}
</script>
表单提交我们现在⼤部分⽤的都是ajax提交了，对于没有⽂件上传的表单，普通的ajax就可以实现,⽽对于有⽂件上传的表单，我⼀般使⽤jquery.form.js插件，感觉还是挺好⽤的1.引⼊相应的js⽂件
<script src="__PUBLIC__/Wx/js/jquery.min.js"></script>
<script src="__PUBLIC__/Wx/js/jquery.form.js"></script>
2.
<script>
function Djly_form_add(){
$("#form-user-add").ajaxSubmit({
success: function (data) {
//de == '200'){ //这些是我demo⾥处理的代码，可不⽤理会
//layer.ssage,{time:1000},function(){
//})
//}else de == '500'){
//layer.ssage);
/
/}
},
error: function (error) {
alert(error); //错误提⽰
},
url:"", //提交的地址
type: "post", //提交的⽅式
dataType: "json" //返回的数据类型
});
}
</script>
好了，以上就是jquery.form.js最简便的⽤法，后台接收值得话,⽂件就⽤$_FILES，普通值就⽤$_POST或$_GET，这我就不多说了，别忘了,form表单要写enctype="multipart/form-data"的属性哦
⾃⼰实例：
这个直接⽤这个即可实现跳转。问题跳转的页⾯根据⾃⼰实际要跳转的页⾯进⾏跳转
<script>
$(      //页⾯加载完执⾏
$("#ajaxForm").on("submit", function () {    //表单提交时监听提交事件
$(this).ajaxSubmit(options);    //当前表单执⾏异步提交，optons 是配置提交时、提交后的相关选项
return false;  //  必须返回false，才能跳到想要的页⾯
})
)
//配置 options 选项
var options = {
url: "/Wave/GenerateWave",      //提交地址：默认是form的action，如果申明，则会覆盖
type: "post",          //默认是form的method（get or post），如果申明，则会覆盖
success: successFun,    //提交成功后的回调函数，即成功后可以定页⾯跳到哪⾥
dataType: "json",      //接受服务端返回的类型
clearForm: true,        //成功提交后，清除所有表单元素的值
resetForm: true,        //成功提交后，重置所有表单元素的值
timeout: 3000          //设置请求时间，超过该时间后，⾃动退出请求，单位(毫秒)
}
//设置提交成功后返回的页⾯
function successFun(data, status) {
if (data.success) {
window.location.href = "/Wave";
} else {
alert("数据处理状态：" + data.success + " 错误信息：" + data.msg + " 提交状态：" + status);
window.location.href = "/Wave/GenerateWave";
}
//alert(data.msg);
//window.location.href = "/Wave";
//$("#showForm").html(data.msg);      //提交表单后从后台接收到的返回来的数据，我保存到了msg⾥
// $("#showForm").html("或者这⾥可以直接写想要显⽰的内容")
}
</script>
下⾯和这个要在form中
<form target="form" method="post" action="/CorssDocking/CorssDockingRegister" ajax="true" ajax-on-success="onSuccess(response)">
<script>
function onSuccess(response) {
if (response.success) {
$("#form1").attr("action", contextPath + '/success');
//alert("@Request.RawUrl");
$(window).attr("location", "localhost:666/Wave");
//window.location.href = "localhost:666/Wave";
} else {
alert("123");
}
}
</script>
测试的⼀些其他代码：
<form id="form1" class="form-inline">
<button type="submit" id="bt" disabled class="btn btn-success btn-primary" >提交</button>
<script type="text/javascript">
$.ajax({
url: 'localhost:666/Wave/GenerateWave',
dataType: 'jsonp',
data: $('.form-inline').serialize(),
jsonp: 'callback',
timeout: 5000,
success: function (data) {
if (data.status === "success") {
$(window).attr("location", "...");
} else if (data.status === "fail") {
alert("⽤户名密码错误");
}
},
error: function () {
alert("超时或服务器其他错误");
}
});
$(function () {
/** 验证⽂件是否导⼊成功  */
$('.form-inline').ajaxForm(function (data) {
if (data == "1") {
alert("提交成功！");
}
});
});
$(function () {
$('#bt').click(function () {
$.ajax({
url:'localhost:666/Wave/GenerateWave',
type: 'POST',
dataType: 'JSON',
data: $('.form-inline').serialize(),
//success: function (arg) {
//    if (arg.success) {
//        window.location.href = 'localhost:666/Wave';
//    } else {
/
/        alert(arg.msg);
//    }
//}
})
})
})
$("#bt").click(function () {
$('.form-inline').ajaxSubmit(function (data) {
alert(data.msg);
});
});
$(".form-inline").ajaxSubmit(function (data) {
var mes = JSON.parse(date);
alert(mes.tip);
window.location.href = "localhost:666/Wave";
});
</script>
最简单的实现表单提交：
<form method="post" ajax="true" ajax-redirect="#" action="/Wave/GenerateWave">
<form action="@Url.Action()" method="post" role="form" ajax="true" ajax-redirect="@Url.Action("Index")"> window.location.href 相关的链接：
window.location：
弹窗：
代码参考：
$("#save").click(function () {
js.loading("正在加载，请稍候...");
var id = $("#id").val();
var code = "";
$.ajax({
type: "POST",
dataType: "json",
url: "${ctx}/xxx/xxx/xxxx/save",
data: $('#inputForm').serialize(),
success: function (resultMap) {
code = sult;
toastr.options = {positionClass: "toast-bottom-right"};
toastr.ssage);
if(code=="yes"){
js.closeCurrentTabPage(function(contentWindow){
contentWindow.page();
});
var printView = '${ctx}/xxx/xxx/xxxx/printView?id='+id;
window.location.href = printView；
}
},
error : function() {
alert("⽹络异常！");
}
});
});
@PostMapping(value = "save")
@ResponseBody
public Map<String, Object> save(@Validated YourBean yourbean) throws RuntimeException {
Map<String, Object> map = new HashMap<>();
try {
xxxService.save(yourbean);
map.put("result", Global.YES);
map.put("message", "保存成功！");
}
} catch (Exception e) {
e.printStackTrace();
map.put("result", Global.NO);
map.put("message", "失败！");
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。