在 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 ( )

其次，我建议您使用具有 Ajaxical 功能的现有、健壮、彻底开发、维护良好的 JavaScript 库，例如 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（您可以随意命名，这只是一个基本示例）应该映射到已知url-pattern 上的web.xml，我们在此示例中使用/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。

应该是这样的。毕竟这很简单，相信我。祝你好运。