Question

我想在下拉列表中按升序/降序选项过滤UserNames，所以每次选择一个选项（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>

//查看类（操作类） //按订单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();

Answer 1

看起来没什么不错，除非你错过了在这里设置“str”

            var url = "http://localhost:8080/Shipping_Order/getcustomer_xml.jsp?order="+str;

如果你设置str为空，那么结果应该是ASC顺序而str =“DESC”会以DESC顺序返回结果

Answer 2

我认为您在解析服务器响应xml时遇到问题。这是进行AJAX调用的非常古老的方法。尝试使用更方便，更健壮的JS框架，如JQuery。解析XML或JSON在那里更容易，你几乎不会犯任何错误。

jquery ajax call

Answer 3

正如我之前所说，使用jquery ajax()来对http请求和each()方法迭代响应xml

按“下拉菜单中的升序/降序选项”过滤名称。

3 个答案: