如何修复 AJAX 响应中 div 开头出现的 "undefined" 文本-php教程-PHP中文网

如何修复 AJAX 响应中 div 开头出现的

php + jquery ajax 动态填充 html 时，因 javascript 变量未初始化导致拼接字符串开头出现 "undefined"，只需将 var kode; 改为 var kode = ""; 即可彻底解决。

php + jquery ajax 动态填充 html 时，因 javascript 变量未初始化导致拼接字符串开头出现 "undefined"，只需将 var kode; 改为 var kode = ""; 即可彻底解决。

在使用 jQuery 的 $.ajax() 请求后端 PHP 数据并动态渲染到页面时，一个常见但容易被忽略的错误是：字符串拼接变量未显式初始化为空字符串。你当前的 JS 代码中：

var kode; // ❌ 未赋值 → 实际值为 undefined
$.each(response, function(i, obj) {
    kode += '<div class="card kartu pb-3">...</div>'; // 相当于 undefined + '<div...>'
    $('#listberita').html(kode);
});</div...>

由于 kode 初始值为 undefined，首次执行 += 操作时，JavaScript 会将 undefined 隐式转为字符串 "undefined"，再与后续 HTML 拼接，最终导致

基于jQuery的AJAX和JSON的实例中文WORD版

本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看

下载

内容以 "undefined" 开头（如截图所示）。

✅ 正确写法应显式初始化为空字符串：

function getNews() {
    $.ajax({
        type: "GET",
        url: "_php/getBerita.php",
        dataType: "json", // 推荐小写 'json'（jQuery 兼容性更佳）
        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:', status, error);
            $('#listberita').html('<div class="alert alert-danger">Failed to load news.</div>');
        }
    });
}

? 额外优化建议：

将 $('#listberita').html(kode) 移至 $.each 循环外部，避免每次迭代都触发 DOM 重绘，显著提升渲染性能；
使用模板字符串（`）替代加号拼接，增强可读性与维护性；
添加 error 回调处理请求失败场景，提升用户体验健壮性；
确保 PHP 返回的 JSON 严格有效（无 BOM、无额外输出），可在 getBerita.php 顶部添加 ob_end_clean(); 并确认 koneksi.php 无 echo/print 输出。