我想通过下拉列表中的升序/降序选项过滤用户名，所以每次我选择一个选项（ASC/DESC）时，用户名都会按该顺序分别排序。
<script>
/* xmlhttpRequest send HTTP/HTTPS requests directly to a webServer and load the server
response data directly back into the script :) */
var xmlHttp;
function showUser(str){
xmlHttp = GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url = "http://localhost:8080/Shipping_Order/getcustomer_xml.jsp?order="+str;
//force a fresh page to load because it's unique, not a page from the cache.
url = url+"&sid="+Math.random();
//the onreadystatechange event is fired ones the request is sent back
xmlHttp.onreadystatechange = stateChanged;
// sends the request to the server
xmlHttp.open("GET",url,true);
xmlHttp.send();
} // end of showUser()
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var xmlDoc = xmlHttp.responseXML.documentElement;
document.getElementById("username").innerHTML =
xmlDoc.getElementsByTagName("username")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("contact").innerHTML =
xmlDoc.getElementsByTagName("contact")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
} // end catch outer
return xmlHttp;
} // end of GetXmlHttpObject
</script>
HTML 代码
<form name="myOrderType" action="myOrderType.action">
<select id="order" onChange="showUser(this.value)">
<option>Select a user name :</option>
<option value="ASC">Ascending</option>
<option value="DESC">Descending</option>
</select>
<%-- <s:select label="Select an Order"
name="order"
headerValue="DESC"
list="#{'1':'ASC', '2':'DESC'}"
/> --%>
</form>
下面是来自控制器类的 orderList
<s:iterator value="orderList">
<tr>
<td><s:property id="username" value="username"/></td>
<td><s:property id="city" value="city"/></td>
<td><s:property id="contact" value="contact"/></td>
</tr>
</s:iterator>
struts.xml
<action name="listUser" class="com.view.OrderProcessingAction" method="listAllUser">
<result name="success">/adminPanel.jsp</result>
</action>
//查看类(Action Class) //按顺序列出所有用户 ASC/DESC
public String listAllUser(){
this.orderList = orderDaoFactory.listUser();
System.out.println("execute called");
return SUCCESS;
}
//控制器类（DAO工厂）
public List<OrderProcessing> listUser() {
HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
Session session = HibernateUtil.getSessionFactory().openSession();
List<OrderProcessing> orderList = null;
String order = request.getParameter("order");
try {
orderList =(List<OrderProcessing>) session.createQuery("from OrderProcessing ORDER BY username" +order).list();
} catch (Exception e) {
e.printStackTrace();
}
return orderList;
}
我现在得到了解决方案。谢谢小伙伴。但是现在在 struts2 中部署该代码是一个问题。所以新问题是“使用 Struts2 对下拉列表的 OnChange 事件调用操作”。
将响应数据直接返回到脚本中:)
var xmlHttp;
function showUser(str) {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Your browser does not support AJAX!");
return;
}
var url = "http://localhost:8080/Shipping_Order/getcustomer_xml.jsp?order="+str;
//force a fresh page to load because it's unique, not a page from the cache.
url = url + "&sid=" + Math.random();
//the onreadystatechange event is fired ones the request is sent back
xmlHttp.onreadystatechange = stateChanged;
// sends the request to the server
xmlHttp.open("GET", url, true);
xmlHttp.send();
}
function stateChanged() {
if (xmlHttp.readyState == 4) {
var xmlDoc = xmlHttp.responseXML.documentElement;
$("#dropdowntable").empty();
for(var i=0;i<xmlDoc.getElementsByTagName("username").length;i++)
{
$("#dropdowntable").append('<tr><td id="username"'+i+'>'+xmlDoc.getElementsByTagName("username")[i].childNodes[0].nodeValue+'</td><td id="city"'+i+'>'+xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue+'</td> <td id="contact"'+i+'>'+xmlDoc.getElementsByTagName("contact")[i].childNodes[0].nodeValue+'</td></tr>');
/* $("#dropdowntable").append('<td id="city"'+i+'>'+xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue+'</td>');
$("#dropdowntable").append('<td id="contact"'+i+'>'+xmlDoc.getElementsByTagName("contact")[i].childNodes[0].nodeValue+'</td></tr>');
*/
}
}
}
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//getcustomer_xml.jsp
String order = request.getParameter("order");
ResultSet rs = st.executeQuery("select username, contact, city from user ORDER BY username "+order);
while(rs.next())
{
out.println("<user>");
out.println("<username>" +rs.getString(1)+ "</username>");
out.println("<contact>" +rs.getInt(2)+ "</contact>");
out.println("<city>" +rs.getString(3)+ "</city>");
out.println("</user>");
}
rs.close();
st.close();