Question

我正在使用JSP，Servlets和Ajax与Smack API构建聊天应用程序。一旦用户连接到Gtalk，他的好友列表就应该显示在UI上。我能够将好友列表放到控制台上，但在JSP上填充它会产生问题。

在我的servlet中，我使用以下方式获取好友列表：

  Roster roster = connection.getRoster();
    Collection<RosterEntry> entries = roster.getEntries();
    for(RosterEntry r:entries)
    {
        String user = r.getUser();
        pw.println(user);
    }

在我的jsp页面中，我希望在页面加载时填充好友列表：

$(document).ready(function() {
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status == 200) 
            {

               document.getElementById(buddies).innerHTML=xmlhttp.responseText;
            }

    }
    }
    xmlhttp.open("POST","LoginIMServlet",true);
    xmlhttp.send(null);
        }
)
<table>
</tr>
  <tr>
    <td>
    <form name=ListForm>
    <select id="buddies" name="buddies" size=40 multiple onclick="window.open("ChatWindow.jsp",width=500,height=350,resizable=yes")>
    </select>
     </form> 
    </td>
  </tr>
</table>

我无法填充多重选择器框。我该如何解决这个问题？

Answer 1

如果你想在页面加载期间做服务器端的东西，你不一定需要JS / Ajax。你可以让JSP完成这项工作。这样可以节省一个HTTP请求的成本。

让servlet的doGet()方法将其存储在请求范围内并转发给JSP。

Roster roster = connection.getRoster();
request.setAttribute("rosterEntries", roster.getEntries());
request.getRequestDispatcher("/WEB-INF/page.jsp").forward(request, response);

让JSP利用JSTL <c:forEach>迭代它并打印<option>元素。

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<select multiple>
    <c:forEach items="${rosterEntries}" var="rosterEntry">
        <option>${fn:escapeXml(rosterEntry.user)}</option>
    </c:forEach>
</select>

（fn:escapeXml()不是强制性的，但它只是阻止您潜在的XSS攻击漏洞）

现在调用servlet的URL而不是JSP的URL。 JSP将“在页面加载时”填充它。

无关具体问题，如果你正在使用jQuery，那么你不应该自己创建XMLHttpRequest个对象。这没有任何意义。只需使用$.ajax()，$.get()等功能即可。例如，请检查this question。

如果确实希望用jQuery解决这个问题，那么最好让servlet以JSON的形式返回数据并使用$.getJSON()来检索它。请改为使用doGet()方法执行以下操作：

Roster roster = connection.getRoster();
String rosterEntriesJson = new Gson().toJson(roster.getEntries());
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(rosterEntriesJson);

（Gson在这里Google GSON，只需在/WEB-INF/lib下载并删除JAR

在/buddies上映射此servlet，并在JSP / jQuery中执行以下操作：

<script>
    $(document).ready(function() {
        $.getJSON('buddies', function(rosterEntriesJson) {
            var $buddies = $('#buddies');
            $.each(rosterEntriesJson, function(index, rosterEntry) {
                $('<option>').text(rosterEntry.user).appendTo($buddies);
            });
        });
    });
</script>
...
<select id="buddies" multiple></select>

使用ajax将集合填充到UI上

1 个答案: