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

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

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

<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提交表單簡(jiǎn)單易操作呵俏，依靠在<form>標(biāo)簽對(duì)中的<input type='submit'>提交按鈕進(jìn)行請(qǐng)求發(fā)送和參數(shù)提交畜伐。其中form標(biāo)簽的post屬性決定提交方式是get還是post闷沥。

jsp代碼

<form id="test" action="servlet/testServlet" method="post" name="test_form">
    賬號(hào):<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超鏈接請(qǐng)求

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

jsp代碼

<a href="servlet/TestServlet?name_user=aaa&name_pwd=bbb">超鏈接請(qǐng)求</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不僅有針對(duì)頁面很多的觸發(fā)事件宵蕉，而且可以獲取到html頁面元素的信息〗诎瘢看一下幾個(gè)簡(jiǎn)單的例子羡玛。

<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í)候，這個(gè)事件會(huì)被作為用戶輸入數(shù)據(jù)校驗(yàn)的入口宗苍。不過仍然因?yàn)閖s使html頁面的靈活性變高稼稿，這種前端校驗(yàn)用戶輸入的方式也不是那么唯一。

jsp代碼

<form id="test" onsubmit="test_onsubmit();">
    賬號(hào):<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)入到這個(gè)js函數(shù)");
            //使用js獲取到id為test的這個(gè)表單
            var frm = document.getElementById("test");
            //設(shè)置這個(gè)表單的提交路徑   
            frm.action = "servlet/TestServlet";
            //設(shè)置這個(gè)表單提交的方式  
            frm.method = "post";
            //提交表單                   
            frm.submit();                        
        }

在test_onsubmit()函數(shù)中,可以選擇進(jìn)行任意其他操作讳窟，包括設(shè)置post還是get方式去提交表單让歼，或者說獲取用戶輸入內(nèi)容，對(duì)其內(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)用一個(gè)js函數(shù)，然后在函數(shù)中去進(jìn)行表單提交补箍。這時(shí)候就不需要<input type='submit'>標(biāo)簽去提交表單了改执。

jsp代碼

<form id="test">
    賬號(hào):<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)會(huì)發(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超鏈接請(qǐng)求

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

注意：

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

jsp代碼

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

注意：

a標(biāo)簽的href屬性必須設(shè)置為#,因?yàn)閍標(biāo)簽?zāi)J(rèn)會(huì)發(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ù)提交早龟，這種比較簡(jiǎn)單。還有一種就是不僅提交表單的內(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">
    賬號(hào):<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的請(qǐng)求路徑和方式
        $("#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)容

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

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

jsp代碼

<form id="test">
    賬號(hào):<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");

注意：

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

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

request.getParameterValues("param_name");

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

request.getParameter("param_name");

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

var json_str = JSON.stringify(json_object);

針對(duì)$.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超鏈接請(qǐng)求

jQuery對(duì)超鏈接請(qǐng)求的操作嘀略，就有點(diǎn)像上面這個(gè)提交表單和額外參數(shù)的demo恤溶，不過因?yàn)闆]有表單，所以超鏈接請(qǐng)求提交的參數(shù)都是額外的參數(shù)帜羊，或者說是任意想要提交的參數(shù)咒程。

jsp代碼

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

注意：

a標(biāo)簽的href屬性必須設(shè)置為#,因?yàn)閍標(biāo)簽?zāi)J(rèn)會(huì)發(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方式提交請(qǐng)求和參數(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請(qǐng)求提交

這里寫一個(gè)簡(jiǎn)單datagrid的提交讼育，在datagrid的提交中帐姻，由于又有一層封裝好的方法，所以使用起來更為簡(jiǎn)單明了奶段。

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,
        //測(cè)試顯示的數(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";
    //提交請(qǐng)求-也就是給datagrid加載數(shù)據(jù)     
    $('#id_table').datagrid('load',{
        //提交獲取的參數(shù)
        query_params_dg_1 : query_params1,
        query_params_dg_2 : query_params2,
        comments : "測(cè)試數(shù)據(jù)"
    });            
}

注意：

在確認(rèn)使用datagrid的分頁功能之后，也就是pagination的屬性為true痹籍，提交參數(shù)時(shí)呢铆，easy-ui會(huì)多封裝2個(gè)參數(shù)傳遞到后臺(tái)。分別是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"));