在使用 jquery ajax 动态填充 html 内容时，若未初始化拼接字符串变量，会导致渲染结果开头出现“undefined”文本；只需将变量声明为初始空字符串即可彻底解决。
在使用 jquery ajax 动态填充 html 内容时，若未初始化拼接字符串变量，会导致渲染结果开头出现“undefined”文本；只需将变量声明为初始空字符串即可彻底解决。
该问题的根本原因在于 JavaScript 中变量作用域与初始化逻辑的疏忽。在你的 getNews() 函数中，声明了 var kode; 但未赋初值，此时 kode 的值为 undefined。随后在 $.each 循环中执行 kode += '...'，等价于：
kode = undefined + '<div class="card">...</div>';
由于 undefined 在字符串拼接中会被强制转换为字符串 "undefined"，因此最终 $('#listberita').html(kode) 渲染出的内容会以 "undefined" 开头，再紧跟实际卡片 HTML —— 这正是截图中异常文本的来源。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 正确做法：始终显式初始化拼接变量为空字符串：
function getNews() {
$.ajax({
type: "GET",
url: "_php/getBerita.php",
dataType: "JSON",
success: function(response) {
var kode = ""; // ✅ 关键修复：初始化为空字符串
$.each(response, function(i, obj) {
kode += `
<div class="card kartu pb-3">
<div class="card-img-body">
@@##@@
</div>
<div class="card-body">
<h4 class="card-title">${obj.nama_berita}</h4>
<p class="card-text">${obj.keterangan_berita.substring(0, 250)}....</p>
<a href="isiBerita.php?id=%24%7Bobj.id%7D#disqus_thread" class="btn btn-success mt-5">Read More</a>
</div>
</div>`;
});
$('#listberita').html(kode); // ✅ 移至循环外，仅执行一次 DOM 更新（性能更优）
},
error: function(xhr, status, error) {
console.error("AJAX 请求失败:", error);
$('#listberita').html('<div class="alert alert-danger">加载新闻失败，请稍后重试。</div>');
}
});
}
? 额外优化建议：
- 将 $('#listberita').html(kode) 移出循环体，避免每次迭代都触发 DOM 操作，显著提升渲染性能；
- 添加 error 回调处理网络或服务端异常，增强健壮性；
- 使用模板字符串（反引号）替代加号拼接，提高可读性与维护性；
- 确保 PHP 接口返回标准 JSON（无 BOM、无额外输出），可在 _php/getBerita.php 开头添加 header('Content-Type: application/json; charset=utf-8'); 并检查 koneksi.php 是否存在意外输出（如空格、UTF-8 BOM）。
? 总结：undefined 不是 AJAX 或 PHP 的 Bug，而是 JavaScript 变量未初始化的经典陷阱。养成 var str = ""; 的编码习惯，可有效规避此类问题。
