form表单提交带参数的两种方式

#第一种方式#

action写明了LoginServlet，通过submit按钮直接提交到后台

<form action="LoginServlet" method="post">
    <input type="text" id="inputUsername" name="username" placeholder="Username" required autofocus>
    <input type="password" id="inputPassword" name="password" placeholder="Password" required>
    <button type="submit">登 录</button>
</form>

后台LoginServlet接收数据，注意前台注明了是method=“post”，所以要在doPost()方法下写

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

#第二种方式#

不希望直接提交，而是通过按钮点击手动提交，适用于需要传入form之外的其他动态参数的时候

这里写了一个表单exportForm，为了美观，除了下载按钮，另外两个input设置成了不可见状态，即隐藏状态

<form id="exportForm" class="sel_btn" action="ExportExcelServlet" method="post" style="display: none">
     <input type="text" id="input_start" name="startdate" style="display:none">
     <input type="text" id="input_end" name="enddate" style="display:none">
     <input type="button" class="sel_btn" value="下载清单" onclick="ExportData()">
</form>

在ExportData（）里面再通过submit()提交 

function ExportData(){
    //传参到form表单隐藏的input标签里面去
    $("#input_start").val(start);
    $("#input_end").val(end);

    //form表单提交
    document.getElementById("exportForm").submit();
}

后台ExportExcelServlet获取参数

String StartDate = request.getParameter("startdate");
String EndDate = request.getParameter("enddate");

#tips#

有以下两个控件，分别是获取起始日期和终止日期的输入框

<input type="text" id="startDate" name="startDate">
<input type="text" id="endDate" name="endDate">

以下获取控件值并对另一个控件进行赋值的两种方式完全等价

document.getElementById("input_start").value = document.getElementById("startDate").value;
document.getElementById("input_end").value = document.getElementById("endDate").value;

$("#input_start").val(document.getElementById("startDate").value);
$("#input_end").val(document.getElementById("endDate").value);

 区别仅仅在于$.val()是JQuery的取值方式

document.getElementById("input_start").value;
$("#input_start").val()

友情链接：

一个form表单对应多个submit  https://www.cnblogs.com/cyfblogs/p/9851440.html