如何使用jQuery在模态框中打印展示Java对象的各属性值

你当前的问题是直接将Java对象存入按钮id属性时，前端实际获取到的是Java对象toString()输出的普通字符串，并非结构化可直接读取属性的对象，可通过以下两种方式实现需求：

方案一：通过data属性传递JSON结构（推荐） #

这是最规范的实现方式，步骤如下：

1. 后端渲染页面前，将Trip对象序列化为JSON字符串：
   以JSP+Jackson为例，先在后端引入Jackson依赖，渲染页面对象时做序列化：

import com.fasterxml.jackson.databind.ObjectMapper;
// 渲染对象前序列化
ObjectMapper mapper = new ObjectMapper();
String tripJson = mapper.writeValueAsString(t);
request.setAttribute("tripJson", tripJson);

2. 修改按钮代码，将JSON存入自定义data属性，不要存入id：

<button class="btn btn-primary open" id="${t.tid}" data-toggle="modal" style="color:white;" data-target="#infoModal" data-trip='${tripJson}'>more info</button>

3. 修改jQuery代码，直接读取结构化对象属性：

$(document).ready(function() {
  $('.open').click(function() {
    // jQuery的data方法会自动将JSON字符串转为JS对象
    const tripObj = $(this).data('trip');
    // 可直接读取所有属性，按需拼接展示内容即可
    const showHtml = `
      <ul>
        <li>行程ID：${tripObj.tid}</li>
        <li>行程名称：${tripObj.tname}</li>
        <li>目的地：${tripObj.tplace}</li>
        <li>套餐价格：${tripObj.tpackage}</li>
        <li>出发时间：${tripObj.tfrom}</li>
        <li>结束时间：${tripObj.tto}</li>
        <li>报名截止：${tripObj.lastdate}</li>
        <li>行程介绍：${tripObj.tinfo}</li>
      </ul>
    `;
    $("#show-data").html(showHtml);
  });
});

方案二：解析现有toString字符串（临时兼容方案） #

如果暂时无法修改后端序列化逻辑，可以通过正则解析当前拿到的toString字符串提取属性：

$(document).ready(function() {
  $('.open').click(function() {
    const tripStr = $(this).attr('id');
    const tripObj = {};
    // 正则匹配所有键值对
    const reg = /(\w+)=([^,\]]+)/g;
    let match;
    while((match = reg.exec(tripStr)) !== null) {
      tripObj[match[1]] = match[2];
    }
    // 后续使用方式和方案一一致，直接读取tripObj的属性即可
    const showHtml = `
      <ul>
        <li>行程ID：${tripObj.tid}</li>
        <li>行程名称：${tripObj.tname}</li>
        <li>目的地：${tripObj.tplace}</li>
        <li>套餐价格：${tripObj.tpackage}</li>
        <li>出发时间：${tripObj.tfrom}</li>
        <li>结束时间：${tripObj.tto}</li>
        <li>报名截止：${tripObj.lastdate}</li>
        <li>行程介绍：${tripObj.tinfo}</li>
      </ul>
    `;
    $("#show-data").html(showHtml);
  });
});

注意事项 #

• 方案一传递JSON时，使用单引号包裹data-trip的属性值，避免JSON内部的双引号和HTML属性的双引号冲突
• 如果行程介绍包含特殊字符，后端序列化时要做好转义处理，避免HTML解析异常

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