表單提交和超鏈接請求傳遞參數(shù)的幾種方式

轉(zhuǎn)載 http://blog.csdn.net/Sky786905664/article/details/73770785
這段時(shí)間在使用easy-ui的datagrid，他有自己提交表單的方式，所以就整理整理頁面對參數(shù)的提交方式：

注：下面代碼都已經(jīng)過測試。

<a name="t1" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t1" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>1. HTML提交表單

HTML提交表單簡單易操作，依靠在<form>標(biāo)簽對中的<input type='submit'>提交按鈕進(jìn)行請求發(fā)送和參數(shù)提交。其中form標(biāo)簽的post屬性決定提交方式是get還是post。

jsp代碼

<form id="test" action="servlet/testServlet" method="post" name="test_form">
    賬號:<input type="text" name="name_user" id="id_user">
    密碼:<input type="password" name="name_pwd" id="id_pwd">
    <input type="submit" value="提交表單">
</form>

servlet或者action根據(jù)name屬性獲取提交的參數(shù)

Java代碼

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t2" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t2" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>2. HTML超鏈接請求

只使用html發(fā)送超鏈接請求的話，方式比較單一。傳遞參數(shù)值是被寫死的，并且只能使用get方式去發(fā)送請求。如果不用JavaScript的話，超鏈接還是作為一個頁面跳轉(zhuǎn)按鈕比較合適。

jsp代碼

<a href="servlet/TestServlet?name_user=aaa&name_pwd=bbb">超鏈接請求</a>

java代碼

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t3" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t3" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>3. Javascript提交表單

使用js和html提交表單的話就可以靈活很多，因?yàn)閖s不僅有針對頁面很多的觸發(fā)事件，而且可以獲取到html頁面元素的信息。看一下幾個簡單的例子。

<a name="t4" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t4" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>3.1 form表單提交前觸發(fā)事件

這里主要是介紹下在提交form表單之前的onsubmit事件,在很早以前學(xué)習(xí)的時(shí)候，這個事件會被作為用戶輸入數(shù)據(jù)校驗(yàn)的入口。不過仍然因?yàn)閖s使html頁面的靈活性變高，這種前端校驗(yàn)用戶輸入的方式也不是那么唯一。

jsp代碼

<form id="test" onsubmit="test_onsubmit();">
    賬號:<input type="text" name="name_user" id="id_user"/>
    密碼:<input type="password" name="name_pwd" id="id_pwd"/>
    <input type="submit" value="提交表單">
</form>

javascript代碼

function test_onsubmit(){
            alert("提交表單前先進(jìn)入到這個js函數(shù)");
            //使用js獲取到id為test的這個表單
            var frm = document.getElementById("test");
            //設(shè)置這個表單的提交路徑   
            frm.action = "servlet/TestServlet";
            //設(shè)置這個表單提交的方式  
            frm.method = "post";
            //提交表單                   
            frm.submit();                        
        }

在test_onsubmit()函數(shù)中,可以選擇進(jìn)行任意其他操作，包括設(shè)置post還是get方式去提交表單，或者說獲取用戶輸入內(nèi)容，對其內(nèi)容進(jìn)行前端校驗(yàn)。

java代碼

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t5" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t5" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>3.2 使用button或者超鏈接標(biāo)簽提交表單

使用button或者超鏈接去提交表單的話，主要是利用onclick觸發(fā)事件去調(diào)用一個js函數(shù)，然后在函數(shù)中去進(jìn)行表單提交。這時(shí)候就不需要<input type='submit'>標(biāo)簽去提交表單了。

jsp代碼

<form id="test">
    賬號:<input type="text" name="name_user" id="id_user"/>
    密碼:<input type="password" name="name_pwd" id="id_pwd"/>
</form>

<input type="button" value="input_button標(biāo)簽" onclick="submit_frm();">   
<button onclick="submit_frm();">button標(biāo)簽</button>    
<a onclick="submit_frm();" href="#">a標(biāo)簽</a>

注意：

a標(biāo)簽的href屬性必須設(shè)置為#,因?yàn)閍標(biāo)簽?zāi)J(rèn)會發(fā)生跳轉(zhuǎn)。

javascript代碼

function submit_frm(){
            var frm = document.getElementById("test");  
            frm.action = "servlet/TestServlet";  
            frm.method = "post";                 
            frm.submit();                        
        }

java代碼

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t6" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t6" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>4. Javascript超鏈接請求

使用js去處理html的超鏈接請求時(shí)，就可以動態(tài)的設(shè)置傳遞參數(shù)，以及傳遞參數(shù)的數(shù)值。由于<a>標(biāo)簽請求的提交需要window.location對象，提交超鏈接請求仍是get方式。

注意：

直接使用js，也可以將超鏈接請求參數(shù)提交方式修改為post，由于jQuery中封裝的要好很多，這里就不記了。點(diǎn)這里可以看到實(shí)現(xiàn)。

jsp代碼

賬號:<input type="text" name="name_user1" id="id_user"/>
密碼:<input type="password" name="name_pwd1" id="id_pwd">
<a href="#" onclick="submit_a();">提交這兩個參數(shù)的值</a>

注意：

a標(biāo)簽的href屬性必須設(shè)置為#,因?yàn)閍標(biāo)簽?zāi)J(rèn)會發(fā)生跳轉(zhuǎn)。

javascript代碼

function submit_a(){
    //獲取用戶輸入的值
    var username = document.getElementById("id_user").value;
    var password = document.getElementById("id_pwd").value;
    //拼接url
    var url = "servlet/TestServlet?";
    url += "username="+username+"&password="+password;
    //重新定位url
    window.location = url;
}

java代碼

String username = request.getParameter("username");
String password = request.getParameter("password");

<a name="t7" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t7" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>5. jQuery提交表單

jquery提交表單有兩種，第一種就是只提交表單中的內(nèi)容，沒有額外數(shù)據(jù)提交，這種比較簡單。還有一種就是不僅提交表單的內(nèi)容，而且增加一些額外的參數(shù)與表單內(nèi)容一起提交。

<a name="t8" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t8" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>5.1 只提交表單內(nèi)容

jsp代碼

<form id="test">
    賬號:<input type="text" name="name_user" id="id_user"/>
    密碼:<input type="password" name="name_pwd" id="id_pwd"/>
</form>
<button id="sub_jQuery">jQuery</button> 

jQuery代碼

$(document).ready(function(){

    //創(chuàng)建id為sub_jQuery的button的單擊事件   
    $("#sub_jQuery").click(function(){
        //設(shè)置表單id為test的請求路徑和方式
        $("#test").attr("action","servlet/TestServlet");
        $("#test").attr("method","post");
        //提交id為test的表單
        $("#test").submit();
    }); 

});

注意：

這里寫法就很靈活，比如用bind去創(chuàng)建click事件，用其他的html標(biāo)簽觸發(fā)事件，獲取表單中的用戶輸入數(shù)據(jù)之類進(jìn)行處理什么的都可以。

java代碼

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t9" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t9" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>5.2 提交表單以及額外內(nèi)容

這種提交方式就是所有表單提交和超鏈接請求中最為靈活的提交方式

了，也是目前做的項(xiàng)目中最常見的頁面提交方式。

jsp代碼

<form id="test">
    賬號:<input type="text" name="name_user" id="id_user">
    密碼:<input type="password" name="name_pwd" id="id_pwd">
</form>

<p id="id_p" name="name_p">p標(biāo)簽中的內(nèi)容</p>
<p><input type="checkbox" name="name_checkbox" value="A">A選項(xiàng)</p>
<p><input type="checkbox" name="name_checkbox" value="B">B選項(xiàng)</p>
<p><input type="checkbox" name="name_checkbox" value="C">C選項(xiàng)</p>
<button id="sub_jQuery">jQuery</button>

jQuery代碼

$(document).ready(function(){

    //創(chuàng)建id為sub_jQuery的button的單擊事件   
    $("#sub_jQuery").bind("click",function(){
        //獲取表單外的段落內(nèi)容和checkbox復(fù)選框的選中值
        var p_value = $("#id_p").html();
        var check_value = [];       
        $("input[name='name_checkbox']:checked").each(function(){
            check_value.push($(this).val());
        });
        //將id為test的表單提交的input參數(shù)進(jìn)行序列化
        var form_value = $("#test").serialize();
        //拼接提交的路徑
        var url = "servlet/TestServlet";
        //將表單外的提交內(nèi)容拼接到路徑中
        url += "?url_p="+p_value+"&url_check="+check_value;
        //使用post方式提交表單以及額外的參數(shù)
        $.post(url,form_value);
   });

});

java代碼

    String username = request.getParameter("name_user");
    String password = request.getParameter("name_pwd");
    String pValue = request.getParameter("url_p");
    String urlCheck = request.getParameter("url_check");

注意：

這里寫的這個小例子中，對于表單外的參數(shù)提交是靠拼接url完成的。

這個checkbox主要是作為個js數(shù)組參數(shù)傳遞的示例，不同于在form表單中提交的checkbox，后臺java獲取數(shù)組的方式是：

request.getParameterValues("param_name");

然而拼接成url之后，后臺獲取方式變成了字符串獲取，得到的是帶逗號分隔的數(shù)組字符串?dāng)?shù)值，那么后臺java獲取只能是：

request.getParameter("param_name");

在現(xiàn)在做的項(xiàng)目中，既然拼接字符串無法傳遞數(shù)組給后臺，所以正常都傳遞JSON字符串。頁面創(chuàng)建的JSON對象轉(zhuǎn)化為字符串，然后后臺通過JSON的解析包去解析。千萬別忘了js轉(zhuǎn)換JSON對象為字符串:

var json_str = JSON.stringify(json_object);

針對$.post( )函數(shù)，詳細(xì)的可以看看這里。

<a name="t10" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t10" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>jQuery超鏈接請求

jQuery對超鏈接請求的操作，就有點(diǎn)像上面這個提交表單和額外參數(shù)的demo，不過因?yàn)闆]有表單，所以超鏈接請求提交的參數(shù)都是額外的參數(shù)，或者說是任意想要提交的參數(shù)。

jsp代碼

賬號:<input type="text" name="name_user" id="id_user">
密碼:<input type="password" name="name_pwd" id="id_pwd">
<a href="#" id = "id_a">jQuery提交這兩個input的值</a>

注意：

a標(biāo)簽的href屬性必須設(shè)置為#,因?yàn)閍標(biāo)簽?zāi)J(rèn)會發(fā)生跳轉(zhuǎn)。

jQuery代碼

$(document).ready(function(){

    //創(chuàng)建id為id_a的超鏈接標(biāo)簽單擊事件
    $("#id_a").bind("click",function(){
        //獲取想要傳遞參數(shù)的數(shù)值
        var url_user = $("#id_user").val();
        var url_pwd = $("#id_pwd").val();
        //拼接url
        var url = "servlet/TestServlet?";
        url += "url_user="+url_user+"&url_pwd="+url_pwd;
        //使用post方式提交請求和參數(shù)
        $.post(url);
    });

});

java代碼

String username = request.getParameter("url_user");
String password = request.getParameter("url_pwd");

<a name="t11" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t11" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>easy-ui的datagrid請求提交

這里寫一個簡單datagrid的提交，在datagrid的提交中，由于又有一層封裝好的方法，所以使用起來更為簡單明了。

jsp代碼

    <div style="height:340px;">
        <table id="id_table" fit="true"></table>
    </div>
    <div id="footer" style="padding:4px;text-align:right">
        查詢條件1:<input type="text" id="id_queryparams_1">
        查詢條件2:<input type="text" id="id_queryparams_2">
        <a href="#" class="easyui-linkbutton" onclick="querydata();">提交查詢條件</a>
     </div>

jQuery代碼

$(document).ready(function(){
    //創(chuàng)建datagrid數(shù)據(jù)表格
    $('#id_table').datagrid({
        loadMsg:'正在加載...',
        url: '',
        //使用datagrid的分頁功能
        pagination: true,
        pageSize: 10,
        pageList: [10, 15, 20, 25, 30],
        fit:true,
        rownumbers:true,
        striped:true,
        toolbar:'#c',
        showFooter:true,
        singleSelect:true,
        checkOnSelect: true,
        selectOnCheck:true,
        //測試顯示的數(shù)據(jù)域名稱，不用關(guān)心
        columns:[[
            {field:'sid',title:'sid',checkbox:true},
            {field:'producer',title:'PRODUCER'},
            {field:'drug_code',title:'DRUG_CODE'},
            {field:'drug_name',title:'DRUG_NAME'},
            {field:'act_quanity',title:'ACT_QUANIYT'},
            field:'drug_name',title:'DRUG_NAME'}
            ]]
        });

});

function querydata(){
    //獲取用戶輸入的數(shù)據(jù)     
    var query_params1 = $("#id_queryparams_1").val();
    var query_params2 = $("#id_queryparams_2").val();      
    //設(shè)置提交的路徑
    $("#id_table").datagrid("options").url="servlet/TestServlet";
    //提交請求-也就是給datagrid加載數(shù)據(jù)     
    $('#id_table').datagrid('load',{
        //提交獲取的參數(shù)
        query_params_dg_1 : query_params1,
        query_params_dg_2 : query_params2,
        comments : "測試數(shù)據(jù)"
    });            
}

注意：

在確認(rèn)使用datagrid的分頁功能之后，也就是pagination的屬性為true，提交參數(shù)時(shí)，easy-ui會多封裝2個參數(shù)傳遞到后臺。分別是page（當(dāng)前第幾頁）和rows（每頁記錄數(shù)）。

java代碼

String qp1 = request.getParameter("query_params_dg_1");
String qp2 = request.getParameter("query_params_dg_2");
String comments = request.getParameter("comments");
//獲取datagrid當(dāng)前第幾頁
int page = Integer.parseInt(request.getParameter("page"));
//獲取datagrid每頁記錄數(shù)
int rows = Integer.parseInt(request.getParameter("rows"));