总结：JSP几种提交表单方法

问题描述：

　　最近进了一家“老公司”工作，说他老不是说他成立的早，是因为他的编程框架太l.......low了。EJB的规范模式，使用是IBM经过Eclipse二次开发出来的RAD（Rational　Application　Development），这软件也太重量级了，基本上占用CPU比例15%左右，内存4GB的跑不起来，然后JSP嵌套大量的Java代码和大量的JS代码，读起来超级累，没有那种分层。吐槽一下，回到主题。这几天的工作主要是改JSP和少量的Java代码，说到JSP当然少不了提交表单了。总结一下JSP几种提交表单的方法。

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

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

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

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

 var j$ = jQuery.noConflict();//注册jQuery
 function onSubmit(){
     j$.ajax({
         type:"get",
         url:"fix_project_contrast_do.jsp",
         data:{
             fixitem_id : j$("#fixitem_id").val(),
             check_man : j$("#check_man").val()
         },
         success:function(ret){
             if(ret == 1) {
                 alert("提交审核成功!");
             }else{
                 alert(ret);

             }
             window.returnValue=true;
             window.close();
         }
     });
 }

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

 <%@ page contentType="text/html; charset=GBK"  import="相应的类路径" %>

 <%
 try{

     Integer fixitem_id = Utility.trimNull(request.getParameter("fixitem_id")), new Integer(0));
     Integer check_man = Utility.parseInt(Utility.trimNull(request.getParameter("check_man")), new Integer(0));
     //处理逻辑省略
     out.clear();
     response.getWriter().write("1");//response相应值
 }catch(Exception e){
     out.clear();
     response.getWriter().write(e.getMessage());
 }

 %>

这种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:,
                   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代码实现相应的业务代码

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

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

 <script type="text/javascript">
     var req=false;//异步请求提交对象
     //1、初始化异步请求提交对象
     function init(){
         if(window.ActiveXObject){//IE
         req=new ActiveXObject("Microsoft.XMLHTTP");
         }else{//firefox
             req=new XMLHttpRequest();
         }
     }
     //发送请求
     function sendReq(){
         init();
         var sd=document.getElementById("stid").value;
         //2、指定处理返回值的函数
         req.onreadystatechange=process;
         //3、打开到资源的连接
         req.open("get","url",true);
         //4、发送请求
         req.send(null);
     }
     //5、处理返回值
     function process(){
         if(req.readyState==4){
             if(req.status==200){
             //获取返回值
             var v=req.responseText;
              var d=document.getElementById("divsid");
             d.innerHTML=v;
         }
     }
 }
 </script>

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

     js$.post("problem_invest_use_money_getCustInfo.jsp", {"fixitem_id" : fixitem_id}, function(data){
         if(data != 0){
             var params = data.split("$");
             if(params[0] == 1){
                 document.getElementById("jkr_cust_id").value = params[1];
                 document.getElementById("jkr_cust_name").value = params[2];
             }else{
                 alert(data)
             }
         }
     });

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

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

 function btnChoose(){
     if(!sl_checkChoice(document.theform.fixitem_id, "项目ID"))        return false;
     if(!sl_checkChoice(document.theform.jj_contract_sub_bh, "合同编号"))        return false;
     var fixitem_id = document.getElementById("fixitem_id").value;
     var jj_contract_bh = document.getElementById("jj_contract_sub_bh").value;
     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');
     var params = v.split("$");
     document.getElementById("money").value = params[0];
     document.getElementById("lx_money").value = params[1];
     document.getElementById("plan_id_list").value = params[2];
 }

其中 v = window.returnValue = returnString;