1.通过<form action="url"><input type="submit"></form>按钮方式提交

  这种方式是最传统的提交表单的方式,就是把所有的表单的值传到url界面。用于本页面传本页面比较多。

2.通过<input type="button" method="post/get" onclick="onSubmit()">

  这里是通过onclick触发js事件,然后我们可以在function onSubmit(){}写一些传输方式,比较典型的就是ajax传输:

 1 var j$ = jQuery.noConflict();//注册jQuery
2 function onSubmit(){
3 j$.ajax({
4 type:"get",
5 url:"fix_project_contrast_do.jsp",
6 data:{
7 fixitem_id : j$("#fixitem_id").val(),
8 check_man : j$("#check_man").val()
9 },
10 success:function(ret){
11 if(ret == 1) {
12 alert("提交审核成功!");
13 }else{
14 alert(ret);
15
16 }
17 window.returnValue=true;
18 window.close();
19 }
20 });
21 }

然后我们可以在fix_project_contrast_do.jsp处理

 1 <%@ page contentType="text/html; charset=GBK"  import="相应的类路径" %>
2
3 <%
4 try{
5
6 Integer fixitem_id = Utility.trimNull(request.getParameter("fixitem_id")), new Integer(0));
7 Integer check_man = Utility.parseInt(Utility.trimNull(request.getParameter("check_man")), new Integer(0));
8 //处理逻辑省略
9 out.clear();
10 response.getWriter().write("1");//response相应值
11 }catch(Exception e){
12 out.clear();
13 response.getWriter().write(e.getMessage());
14 }
15
16 %>

这种ajax异步传输用于修改后保存然后刷新页面比较多。

扩展:

如果我上传的页面包含<input type="file">的时候,需要修改在我们form标签

<form name="form_name" name="form_loan_update" enctype="multipart/form-data" method="post"> 我们就要通过下面代码提交表单了,fileElementId:'form_name'是提交form_name整个表单

        jQuery.ajaxFileUpload({
async:false,
url:'fix_project_contrast_do.jsp',
secureuri:false,
fileElementId:'form_name',
dataType: 'json',
beforeSend:function(){
},
complete:function(){
},
success: function (data, status){
//表单参数
//次顺序
alert("保存成功");
window.location.reload();//刷新
},
error: function (data, status, e){
var result = Ext.MessageBox.show({
title: '事务表单异常',
msg: data.responseText,
width:520,
closable:false
});
}
});
}

然后在fix_project_contrast_do.jsp接收数据的数据需要

  Integer fixitem_id = Utility.trimNull(file.getParameter("fixitem_id")), new Integer(0));

3.通过<form name="test" method="post" action="#"><input type="button" onclick="document.test.submit()"></form>

使用java代码实现相应的业务代码

 1 <%
2 if (request.getMethod().equals("POST")) {
3 /**逻辑代码
4 *1.获取参数
5 *2.处理参数,实现业务逻辑
6 *3.设置标识,用于通过js跳转页面或刷新页面
7 */
8 bSuccess = true;
9 }
10 %>
11 <%if (bSuccess) {%>
12 alert("保存成功!");
13 var url = "对应的url参数";
14 location = url;
15 <%}%>

4.异步传输,实时监控表单数据

 1 <script type="text/javascript">
2 var req=false;//异步请求提交对象
3 //1、初始化异步请求提交对象
4 function init(){
5 if(window.ActiveXObject){//IE
6 req=new ActiveXObject("Microsoft.XMLHTTP");
7 }else{//firefox
8 req=new XMLHttpRequest();
9 }
10 }
11 //发送请求
12 function sendReq(){
13 init();
14 var sd=document.getElementById("stid").value;
15 //2、指定处理返回值的函数
16 req.onreadystatechange=process;
17 //3、打开到资源的连接
18 req.open("get","url",true);
19 //4、发送请求
20 req.send(null);
21 }
22 //5、处理返回值
23 function process(){
24 if(req.readyState==4){
25 if(req.status==200){
26 //获取返回值
27 var v=req.responseText;
28 var d=document.getElementById("divsid");
29 d.innerHTML=v;
30 }
31 }
32 }
33 </script>

5.$.post()提交表单,$.ajax的封装,原理和$.ajax一样。需要导入.jquery.js包

 1     js$.post("problem_invest_use_money_getCustInfo.jsp", {"fixitem_id" : fixitem_id}, function(data){
2 if(data != 0){
3 var params = data.split("$");
4 if(params[0] == 1){
5 document.getElementById("jkr_cust_id").value = params[1];
6 document.getElementById("jkr_cust_name").value = params[2];
7 }else{
8 alert(data)
9 }
10 }
11 });

其中回调函数data就是通过java代码:response.getWriter().write(returnString);返回

6.showModalDialog返回获取放回字符串

 1 function btnChoose(){
2 if(!sl_checkChoice(document.theform.fixitem_id, "项目ID")) return false;
3 if(!sl_checkChoice(document.theform.jj_contract_sub_bh, "合同编号")) return false;
4 var fixitem_id = document.getElementById("fixitem_id").value;
5 var jj_contract_bh = document.getElementById("jj_contract_sub_bh").value;
6 var v = showModalDialog('/efifs/zhongjiantou/repayment_principal_plan_choose.jsp?fixitem_id='+fixitem_id+'&jj_contract_bh='+jj_contract_bh,'','dialogWidth=1000px;dialogHeight=800px;status=no;help=0');
7 var params = v.split("$");
8 document.getElementById("money").value = params[0];
9 document.getElementById("lx_money").value = params[1];
10 document.getElementById("plan_id_list").value = params[2];
11 }

其中 v = window.returnValue = returnString;

JSP提交表单的几种方法的更多相关文章

  1. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  2. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  3. 利用JS提交表单的几种方法和验证

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...

  4. spring mvc 防止重复提交表单的两种方法,推荐第二种

    第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...

  5. Mvc 提交表单的4种方法全程详解

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...

  6. Mvc 提交表单的4种方法

     一,MVC  HtmlHelper方法 1.     Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 2.     ...

  7. js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(fo ...

  8. js校验表单后提交表单的三种方法总结(转)

    第一种: 代码如下: <script type="text/javascript"> function check(form) { if(form.userId.val ...

  9. JS-校验表单后提交表单的三种方法总结

    第一种: <script type="text/javascript"> function check(form) { if(form.userId.value=='' ...

随机推荐

  1. javacript中apply和call的区别

    apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.   接受的参数是一个字符串. call:和apply的意思一样,只不过是参数列表不一样. 接收的参数是一个数组. 例如: <s ...

  2. 【转】Windows2008上传大文件的解决方法(iis7解决上传大容量文件)

    2008上传大文件的解决方法:http://wenku.it168.com/d_000091739.shtml 2003上传大文件的解决方法:http://tech.v01.cn/windowsxit ...

  3. OpenCV for Python 学习笔记 二

    今天主要看了OpenCV中的事件以及回调函数,这么说可能不准确,主要是下面这两个函数(OpenCV中还有很多这些函数,可以在 http://docs.opencv.org/trunk/modules/ ...

  4. 取消CentOS 的图形界面 开机直接进入命令行模式(转)

    (1)具体操作   #vi /etc/inittab          –编辑/etc/inittab文件 找到下面语句: # Default runlevel. The runlevels used ...

  5. 使用Python处理CSV文件的一些代码示例

    笔记:使用Python处理CSV文件的一些代码示例,来自于<Python数据分析基础>一书,有删改 # 读写CSV文件,不使用CSV模块,仅使用基础Python # 20181110 wa ...

  6. vim tips 集锦

    删除文件中的空行 :g/^$/d g 表示 global,全文件 ^ 是行开始,$ 是行结束 d 表示删除该 这里只能匹配到没有白空符的空行,假如要删除有空白符的空行,则使用: :g/^\s*$/d ...

  7. Android-基本控件和详解四种布局方式

    转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...

  8. "Installing Software" has encountered a problem---pydev on ubuntu

    "Installing Software" has encountered a problem. An error occurred while collecting items ...

  9. linux host=${host:-"localhost"}使用方法

    localhost=${host:-"localhost"} host 变量未设定或者为空,host取"-"后面的值;否则host=$host host=${h ...

  10. Struts action

    <action name="KnowledgeBankManageAction_*" class="knowledgeBankManageAction" ...