在AJAX中處理servlet輸出

Question

我的問題：我正在從JSP中的AJAX函數向servlet發送請求。

該servlet處理數據並返回ArrayList。

我的問題是如何處理AJAX內部的ArrayList，並將其顯示爲同一個JSP中的表。

的代碼是

function ajaxFunction () { 

// var url= codeid.options[codeid.selectedIndex].text; 
url="mstParts?caseNo=9&cdid=QCYST0020E1"; 
// alert(cid); 
    var httpRequest; 
    if (window.XMLHttpRequest) { 
     httpRequest = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (httpRequest == null){ alert('null');} 

alert(url); 
    httpRequest.open("GET", url, true); 

    httpRequest.onreadystatechange = function() { alertContents(httpRequest); }; 
    //httpRequest.setRequestHeader('Content-Type', 'text/plain'); 
    httpRequest.send(null); 

    alert('t1'); 
} 

function alertContents(httpRequest) { 
    if (httpRequest.readyState == 4) { 
     var cType =httpRequest.getResponseHeader("Content-Type"); 
     //document.write(httpRequest.toString()); 
     // alert(cType); 
     // var xmlDoc=httpRequest.responseText; 
     //document.write(xmlDoc.toString()); 
     // if (xmlDoc == null) {alert('null returned');} 
     if (!httpRequest.status == 200) { 
      alert('Request error. Http code: ' + httpRequest.status); 
     } 
     else 
      { 
       var profileXML = eval(<%=request.getAttribute("data")%>); 
       if (profileXML != null){ alert('null'); }//else { alert(profileXML(0)); } 
       // httpRequest.getAttribute("data"); 


      } 
    } 
} 

Answer 1

var profileXML = eval(<%=request.getAttribute("data")%>); 

首先，我建議您瞭解JavaScript和JSP之間的牆。 JS完全運行在客戶端和JSP/Java完全運行在服務器端。正如你所想的那樣，它們當然不會同步。要了解更多信息，請閱讀this blog article。

function ajaxFunction () 

其次，我會建議你使用現有的，強大的，深入開發，維護良好的JavaScript庫Ajaxical能力，如jQuery，而不是重新發明AJAX輪和戰鬥/掙扎/擔心瀏覽器的具體問題/麻煩/行爲/痛苦。我還建議使用JSON作爲服務器上的Java Servlet和客戶端上的JavaScript之間的數據傳輸格式。在Java方面，你可以使用偉大的Gson庫。

下面是所有提到的技術的啓示例子。讓我們先從一個Servlet和JavaBean的：

public class JsonServlet extends HttpServlet { 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     List<Data> list = dataDAO.list(); 
     response.setContentType("application/json"); 
     response.setCharacterEncoding("UTF-8"); 
     response.getWriter().write(new Gson().toJson(list)); 
    } 
} 

public class Data { 
    private Long id; 
    private String name; 
    private Integer value; 
    // Add/generate getters/setters. 
} 

的JsonServlet（你可以命名爲任何你想要的，這只是一個簡單的例子）應在web.xml被映射在已知url-pattern，讓我們用/json在這個例子中。類Data只是表示您的HTML表（和數據庫表）的一行。

現在，這裏是你如何加載一個表的jQuery.getJSON幫助：

$.getJSON("http://example.com/json", function(list) { 
    var table = $('#tableid'); 
    $.each(list, function(index, data) { 
     $('<tr>').appendTo(table) 
      .append($('<td>').text(data.id)) 
      .append($('<td>').text(data.name)) 
      .append($('<td>').text(data.value)); 
    }); 
}); 

課程的tableid表示有問題的<table>元素的id。

應該是這樣。畢竟它很簡單，相信我。祝你好運。