您的位置：首页 > 其它

form 表单 几种提交方式

2016-02-27 16:01 495 查看
form 表单 几种提交方式：

最常用的方式：submit提交

<form name=”form” method=”post” action=”#">
<input type=”submit” name=”submit” value=”提交">
</form>


另外一种是从网上抄的，暂时记录一下，是使用图片：

<form name=”form” method=”post” action=”# ">
<input type=”image” name=”submit” src=”btnSubmit.jpg”>
</form>


第三种：使用链接来提交表单，用到了javascript的DOM模型：

<form name=”form” method=”post” action=”#”>
<a href=”javascript:form.submit();”>提交</a>
</form>


======================================================================================================================================
再之前我做过一个小项目：

一个表单有3个提交：

<body>
<a href="#">财务品牌销售数据分析</a>
<form  id="formid" <span style="font-family: Arial, Helvetica, sans-serif;">name="form1"  </span><span style="font-family: Arial, Helvetica, sans-serif;">method="get" action="/caiwubaobiao/CaiWuBaoBiaoNo1Excel1" ></span>
年度：<select name="a">
<option value="2014">2014年</option>
<option value="2015" selected="selected">2015年</option>
<option value="2016">2016年</option>
<option value="2017">2017年</option>
<option value="2018">2018年</option>
<option value="2019">2019年</option>
</select>
月份:<select name ="b" >
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
品牌:<input type="text" name ="c" value="40"  />
显示模式:<select id="d" >
<!-- line,spline, scatter, splinearea bar,pie,area,column -->
<option value="line" selected="selected">线型图</option>
<option value="column">柱状图</option>
<option value="bar">横柱状图</option>
<option value="spline">曲线图</option>
<option value="area">面积图</option>
</select>
<input  type="button"  value="查询" id="tj">
<input  type="button" value="查看EXCEL"  id="tjchakan">
<input  type="button" value="下载EXCEL"  id="tjexcel">
</form>
上面的的表单有三个提交：

<input  type="button" value="查询" id="tj">
<input  type="button" value="查看EXCEL"  id="tjchakan">
<input  type="button" value="下载EXCEL"  id="tjexcel">
所以没有用submit，这个时候，使用函数进行提交：

$(function(){
$("#tjexcel").click(function(){
document.form1.action="http://localhost:8888/caiwubaobiao/exportNo1?"+$("#formid").serialize();;
document.form1.submit();
});
});

$(function(){
$("#tjchakan").click(function(){
document.form1.action="http://localhost:8888/caiwubaobiao/CaiWuBaoBiaoNo1Excel1?"+$("#formid").serialize();;
document.form1.submit();
});
});
这个生成图形列表查看：

$(function(){
$("#tj").click(function(){
var chart;
//$("#formid").serialize()
var url = "http://localhost:8888/caiwubaobiao/1?"+$("#formid").serialize();
var args = {"time" : new Date()};
$.get(url,args,function(data) {
var options = {
//HighCharts中chart属性配置
chart : {
renderTo : 'container',//div 标签
//type : 'line',//图表类型
//type:'column',
type : $("#d").val(),
},
//设置中间标题名称
title : {
text : '宝迪财务数据分析'
},
credits : { //右下脚文本
href : 'http://www.budee.com', //链接地址
position : { //文字的位置
x : -30,
y : -30
},
style : { //文字的样式
color : 'blue',
fontWeight : 'bold'
},
enabled : true,//不显示highCharts版权信息,不显示为false
text : 'BUDEE' //文字
},
colors : [ '#baf5fa',
'#000000',//黑
'#FF0000',//红
'#00FF00',//绿
'#0000FF',//蓝
'#FFFF00',//黄
'#0033ff',//紫
'#808040',//灰
'#660000',
'#990000',
'#66ffff',
'#cc3399',
'#660099',
'#000099',
'#330000',
'#ffcc66',
'#6666ff',
'#333300',
'#ff00cc',
'#660066',
'#6600ff',
'#11ddee',

],
exporting : {
//enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效
buttons : { //配置按钮选项
printButton : { //配置打印按钮
width : 50,
symbolSize : 20,
borderWidth : 2,
borderRadius : 0,
hoverBorderColor : 'red',
height : 30,
symbolX : 25,
symbolY : 15,
x : -200,
y : 20
},
exportButton : { //配置导出按钮
width : 50,
symbolSize : 20,
borderWidth : 2,
borderRadius : 0,
hoverBorderColor : 'red',
height : 30,
symbolX : 25,
symbolY : 15,
x : -150,
y : 20
}
},
filename : 'budee.com',//导出的文件名
type : 'image/png',//导出的文件类型
width : 800
//导出的文件宽度
},
labels : {
items : [ {
//标签代码（html代码）
html : '<p style="font-size:20">Copyright © 2015-2020 </p><a href="#" style="font-size:20;text-decoration: underline;">宝迪</a>',
style : { //设置标签位置
left : '100px',
top : '50px'
}
} ],
style : { //设置标签颜色
color : 'rgb(0,0,255)'
}
},
xAxis : {
categories : [ '1月份',
'2月份', '3月份',
'4月份', '5月份',
'6月份', '7月份',
'8月份', '9月份',
'10月份', '11月份',
'12月份' ]
},
series : []
};
options.series = new Array();
for (var aa = 0; aa < data.length; aa++) {
var a = data[aa];
var b;
var c = [];
for ( var key in a) {
b = key;
c = a[key];
}
options.series[aa] = new Object();
options.series[aa].name = b;
options.series[aa].data = c;
}
chart = new Highcharts.Chart(
options);
});
<!-- 必须导入jquery的js,不然return false不管用 -->
return false;
});
});


在jquery 中如何实现提交呢？这个和上面的javascript一样，类似。
<span style="white-space:pre">	</span>$(function() {
$('#loginform').submit(function(e) {
return false;
});
});


四、提交了表单之后，如何跳转到哪一页，需要在后台的controller中进行定义，我先摘录一下，我刚刚做过的一个项目的跳转吧，如果不记录一下，估计不久之后，就会忘记了。

@RequestMapping (value ="/mine/photos/add",method=RequestMethod.POST)
public String AddPhotoGallery(PhotoGalleryReqDto photoGalleryReqDto){
SessionUser sessionUser = getSessionUser();
photoGalleryReqDto.setCoverImageUrl("222");
photoGalleryReqDto.setCreateId(sessionUser.getId());
photoGalleryReqDto.setLastModifyId(sessionUser.getId());
SimpleResponse<PhotoGalleryRespDto> add = (SimpleResponse<PhotoGalleryRespDto>) photoGalleryApi.add(getCommonRequest(photoGalleryReqDto));
if(add.getCode()==100){
return "redirect:/mine/photos/"+add.getData().getId()+"/edit";
}
return "redirect:/mine/photos";
}
使用了：redirect这个东西。
http://blog.csdn.net/honey_claire/article/details/7658490 http://suo.iteye.com/blog/493998
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航