如何用JQuery在JSP与Servlet间请求并打印对象数组及messages2到chat容器

你已经搞定了消息发送到Servlet并保存的逻辑，现在就差把返回的消息列表渲染到页面的chat容器里了。咱们一步步来解决这个问题：

首先，修复前端的核心问题：处理返回的JSON并渲染DOM #

当前你的代码已经能成功发送请求并拿到JSON数据，但缺少将数据渲染到页面的逻辑，另外还有个小坑：表单的默认提交行为会导致页面刷新，直接打断你的AJAX流程。

修改后的原生JS代码（保留你原有的XHR方式） #

<form method="post" id="messageForm" enctype="multipart/form-data">
  <div class="chat">
    <!-- 消息会渲染在这里 -->
  </div>
  <div class="send">
    <div class="text-message-container">
      <input type="text" name="testMessage" class="text-message" id="toSend">
      <!-- 传递event参数，用来阻止默认提交 -->
      <button type="submit" class="send-message" onclick="addMessage(event);">
        <img src="img/send1.png" class="img-send">
      </button>
    </div>
  </div>
</form>

<script>
function addMessage(event) {
  // 关键：阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  if(window.XMLHttpRequest) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState === 4 && xhttp.status === 200) {
        try {
          // 解析Servlet返回的JSON数组
          var messages = JSON.parse(xhttp.responseText);
          // 获取chat容器
          var chatContainer = document.querySelector('.chat');
          
          // 清空现有内容（如果需要保留历史可以跳过这步，用append）
          chatContainer.innerHTML = '';
          
          // 遍历消息数组，逐个渲染到页面
          messages.forEach(function(msg) {
            // 创建单个消息的DOM元素
            var messageElement = document.createElement('div');
            // 注意：这里的字段名要和你的Message类字段对应！
            // 如果你的Message类里存内容的字段是`message`，就用msg.message；如果是`text`就用msg.text
            messageElement.textContent = `ID: ${msg.id} - ${msg.message}`;
            // 给消息加自定义样式类，方便美化
            messageElement.classList.add('chat-message');
            // 添加到chat容器
            chatContainer.appendChild(messageElement);
          });
        } catch(e) {
          console.error('解析JSON失败，请检查Servlet返回格式:', e);
        }
      }
    };
    xhttp.open("POST", "messageServlet", true);
    var formData = new FormData(document.getElementById('messageForm'));
    xhttp.send(formData);
  } else {
    console.log('当前浏览器不支持XMLHttpRequest，请升级浏览器');
  }
}
</script>

如果你想用jQuery实现（更简洁） #

如果你偏好jQuery，下面是对应的实现方式，解决你提到的“无法通过jQuery读取JSON”的问题：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<form method="post" id="messageForm" enctype="multipart/form-data">
  <div class="chat">
    <!-- 消息会渲染在这里 -->
  </div>
  <div class="send">
    <div class="text-message-container">
      <input type="text" name="testMessage" class="text-message" id="toSend">
      <button type="submit" class="send-message">
        <img src="img/send1.png" class="img-send">
      </button>
    </div>
  </div>
</form>

<script>
$(document).ready(function() {
  $('#messageForm').submit(function(event) {
    // 阻止默认提交行为
    event.preventDefault();
    
    var formData = new FormData(this);
    $.ajax({
      url: 'messageServlet',
      type: 'POST',
      data: formData,
      // 这两个参数必须设置，否则FormData会被错误处理
      processData: false,
      contentType: false,
      success: function(messages) {
        var $chatContainer = $('.chat');
        $chatContainer.empty();
        
        // 遍历消息数组渲染
        $.each(messages, function(index, msg) {
          $chatContainer.append(`<div class="chat-message">ID: ${msg.id} - ${msg.message}</div>`);
        });
      },
      error: function(xhr, status, error) {
        console.error('请求失败:', error);
      }
    });
  });
});
</script>

然后，优化Servlet的几个细节 #

你的Servlet逻辑基本没问题，但有两个小细节需要调整：

1. 关闭Hibernate Session：避免数据库连接泄漏
2. 添加泛型约束：让查询更安全

修改后的Servlet代码：

@WebServlet(name = "messageServlet", urlPatterns = {"/messageServlet"})
@MultipartConfig
public class messageServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String msg = req.getParameter("testMessage");
        SessionFactory factory = session.getSessionFactory(); // 确保这里的SessionFactory获取逻辑正确
        Session s = factory.openSession();
        try {
            Message m = new Message();
            m.setMessage(msg);
            s.beginTransaction();
            s.save(m);
            s.getTransaction().commit();
            
            List<Message> messages2 = s.createQuery("From Message", Message.class).list(); // 加上泛型更安全
            String json = new Gson().toJson(messages2);
            
            resp.setContentType("application/json");
            resp.setCharacterEncoding("UTF-8");
            resp.getWriter().write(json);
        } finally {
            // 关键：用完Session一定要关闭
            if (s != null && s.isOpen()) {
                s.close();
            }
        }
    }
}

关键注意点 #

• 字段名匹配：如果你的Message类中存储消息内容的字段是text（比如private String text;），那么前端要改成msg.text；如果是message，就用msg.message，必须和Gson序列化的JSON键一致。
• JSON格式验证：可以在浏览器控制台的Network标签里查看Servlet返回的响应内容，确认是合法的JSON数组。
• 样式美化：你可以给.chat-message类添加CSS样式，让消息显示更美观。

内容的提问来源于stack exchange，提问作者michael mattanza