jQuery AJAX获取数值服务端响应存在但页面不显示问题排查

开发Web应用时，通过jQuery的$.ajax()从服务端获取数据展示，其他字段显示正常，但I、J对应的obj.pER和obj.rER数值（已确认服务端返回有效，格式如22,949、397,150.21）无法在页面显示，推测问题出在数字格式化环节。

相关代码 #

var xyzToggleValue = <%= xyzEnabled %>;
function displayData(cDate) {
  let defPk = $("#defPk").val();
  let ghiId = $("#ghiPK").val().split("=")[0];
  var jklText = $('#jklRange').text();
  var dates = jklText.split(' - ');
  var mnoDate = convertDateFormat(dates[0]);
  var pqrDate = convertDateFormat(dates[1]);

  let dataUrl = "e/data-url?ghiId=" + ghiId + "&defPk=" + defPk + "&mnoDate=" + mnoDate + "&pqrDate=" + pqrDate + "&cDate=" + cDate;

  $.ajax({
    type: "GET",
    url: dataUrl,
    success: function(data) {
        if (data != null && data.length > 0) {
            let obj = data[0];
            let dataHtml = '';
            dataHtml += '<div style="width:100%;height:100%;overflow-x:none;overflow-y:none"><br>';
            dataHtml += '<b><span class="black">A</span></b>: ' + obj.dA + '<br><br>';
            dataHtml += '<b><span class="black">B</span></b>: ' + obj.oO + '<br><br>';
            dataHtml += '<b><span class="black">C</span></b>: ' + obj.pO + '<br><br>';
            dataHtml += '<b><span class="black">D</span></b>: ' + obj.rO + '<br><br>';
            dataHtml += '<b><span class="black">E</span></b>: ' + obj.pA + '<br><br>';
            dataHtml += '<b><span class="black">F</span></b>: ' + obj.ruA + '<br><br>';
            dataHtml += '<b><span class="black">G</span></b>: ' + obj.pbA + '<br><br>';
            dataHtml += '<b><span class="black">H</span></b>: ' + obj.ruAO + '<br><br>';
            if (xyzToggleValue === "true") {
                dataHtml += '<b><span class="black">I</span></b>: ' + obj.pER.toLocaleString('en-US', {minimumFractionDigits: 2}) + '<br><br>';
                dataHtml += '<b><span class="black">J</span></b>: ' + obj.rER.toLocaleString('en-US', {minimumFractionDigits: 2}) + '<br><br>';
            }
            dataHtml += '</div>';

            $('#dataHtml').html(dataHtml);
        }
    },
    error: function(response) {
      $("#errorMsg").html(response.responseText);
      return false;
    }
  });
}

问题原因 #

服务端返回的obj.pER和obj.rER是带千分位逗号的字符串类型，而非原生JavaScript数字类型。直接对字符串调用toLocaleString()方法会抛出错误，导致这部分HTML拼接失败，最终页面无法显示对应内容。

解决方案 #

先将字符串转换为合法数字，再进行格式化：

1. 移除字符串中的千分位逗号
2. 转换为浮点型数字
3. 调用toLocaleString()进行格式化（或直接使用转换后的数字）

修改后的关键代码片段：

if (xyzToggleValue === "true") {
    // 处理pER：移除逗号转数字后格式化
    const pERNum = parseFloat(obj.pER.replace(/,/g, ''));
    // 处理rER：移除逗号转数字后格式化
    const rERNum = parseFloat(obj.rER.replace(/,/g, ''));
    // 容错处理：避免转换失败导致页面异常
    dataHtml += '<b><span class="black">I</span></b>: ' + (isNaN(pERNum) ? 'N/A' : pERNum.toLocaleString('en-US', {minimumFractionDigits: 2})) + '<br><br>';
    dataHtml += '<b><span class="black">J</span></b>: ' + (isNaN(rERNum) ? 'N/A' : rERNum.toLocaleString('en-US', {minimumFractionDigits: 2})) + '<br><br>';
}

额外注意 #

• 如果服务端可能返回空值或非数字格式，必须加入isNaN()判断做容错，避免整个HTML拼接中断
• 若不需要额外格式化，转换为数字后可直接拼接，无需调用toLocaleString()

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