如何获取JS函数返回的URL并作为参数传递给Struts2的qrCode.do Action

• JSP的JSTL标签（比如<c:set>）、服务端参数渲染都是服务端执行的，页面还没发送到浏览器的时候就已经跑完了，此时客户端的JavaScript函数还完全没执行，不可能拿到JS生成的变量值
• img标签的src属性写javascript:前缀不会触发JS函数执行再拼接参数，浏览器会直接把整段字符串作为请求参数传给后端，自然参数无效

1. 修改JSP页面代码 #

先给img标签加id，移除写死的src属性，等JS生成完URL后动态赋值：

<div class="col-sm-3 gnm-container-qrcode">
  <!-- 先给img加id，src留空或者放占位图 -->
  <img id="qrcodeImg" src="" alt="预约二维码"/>
  <p id="urlWhatsText"></p>
</div>

<script>
// 等页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 先生成whatsapp链接
  const rawUrl = gerarUrlWhatsapp(
    '${ agendamento.especialidade.dsEspecialidade}',
    '${dateParts[0]}',
    '${dateParts[1]}',
    '${agendamento.nomePrestador}',
    '${agendamento.unidadeMedica.nome}',
    '${agendamento.unidadeMedica.enderecoCompleto}'
  );
  // 转义URL特殊字符，避免传参截断/乱码
  const encodedUrl = encodeURIComponent(rawUrl);
  // 动态给img赋值src，触发请求qrCode.do
  document.getElementById('qrcodeImg').src = `../qrCode.do?qrCodeUrlWhatsapp=${encodedUrl}`;
  // 把URL显示到p标签
  document.getElementById('urlWhatsText').innerText = rawUrl;
});
</script>

2. 可选优化：后端参数接收加解码 #

如果参数里还有特殊字符转义问题，可以在Action里对接收的qrCodeUrlWhatsapp做URL解码：

import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

public String qrCode() {
  // 解码URL参数
  String decodedUrl = URLDecoder.decode(qrCodeUrlWhatsapp, StandardCharsets.UTF_8);
  qrCodeImage = generateQrCodeImpl.createQrCode(accessToken, decodedUrl);
  return SUCCESS;
}

原理说明 #

• 等浏览器把页面加载完成、JS函数执行拿到正确的WhatsApp链接之后，才主动发起二维码接口的请求，保证参数一定是生成完成的有效值
• encodeURIComponent会处理链接里的换行、空格、特殊符号，避免请求参数被截断或者乱码

内容的提问来源于stack exchange，提问作者Romeu Fernandes Bessa