總結：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: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代碼實現相應的業務代碼

<%
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;