表單提交和超鏈接請(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>
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"));