Обработка вывода сервлета в AJAX

Question

Моя проблема: я отправляю запрос сервлету из функции AJAX в JSP.

Сервлет обрабатывает данные и возвращает ArrayList.

Мой вопрос заключается в том, как обработать ArrayList внутри AJAX и отобразить его в виде таблицы в том же 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 работает полностью на стороне сервера . Они, конечно, не работают синхронно, как вы думаете. Чтобы узнать больше, прочитайте эту статью блога .

function ajaxFunction ( )

Во-вторых, я бы порекомендовал вам использовать существующую, надежную, тщательно разработанную, хорошо поддерживаемую библиотеку JavaScript с возможностями Ajaxical, такими как jQuery , вместо того, чтобы заново изобретать колесо AJAX и бороться / бороться / беспокоиться с специфические проблемы браузера / проблемы / поведение / боли. Я также рекомендовал бы использовать JSON в качестве формата передачи данных между сервлетом Java на сервере и JavaScript на клиенте. Для Java вы можете использовать для этого великолепную библиотеку Gson .

Ниже приведен пример со всеми упомянутыми техниками. Давайте начнем с сервлета и 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 обозначает id рассматриваемого элемента <table>.

Так и должно быть. В конце концов, это довольно просто, поверь мне. Удачи.