form 表单几种提交方式

来源：互联网发布：android安装linux系统编辑：程序博客网时间：2024/05/21 00:45

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

0 1

form 表单 几种提交方式

form 表单几种提交方式