form 表单几种提交方式

最新推荐文章于 2022-08-02 11:20:00 发布

原创最新推荐文章于 2022-08-02 11:20:00 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文深入探讨了表单提交的多种方式，包括submit提交、使用图片提交和通过JavaScript函数提交，并详细解释了如何在提交后实现页面跳转。通过实例展示了在不同场景下的应用，包括使用jQuery和高德图表库生成动态图表，以及后端控制器如何根据提交信息进行跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/honey_claire/article/details/7658490

http://suo.iteye.com/blog/493998