AJAX请求PHP数据无法插入指定div问题排查求助

你的问题主要出在JavaScript代码里，还存在表单默认提交行为的干扰，HTML本身的问题不大（不过ID用纯数字虽然HTML5允许，但建议尽量用字母开头的ID，避免潜在兼容问题）。下面一步步拆解问题并给出修复：

1. 客户端JS里不能直接写PHP代码 #

看你的AJAX success回调里的代码：

document.getElementById("1").innerHTML = '<input type="text" value="<?php foreach ($data as $key => $value) {echo($value['url']);?>'

这是完全错误的！JavaScript是运行在浏览器端的客户端代码，浏览器根本不认识<?php ... ?>这种服务器端语法，不会解析它。你应该直接使用AJAX请求返回的response参数——因为你的PHP文件已经输出了所有url内容，直接把response插入到div里就可以了。

2. 表单提交会刷新页面，打断AJAX请求 #

你的表单用了onsubmit="start()"，但默认情况下，点击提交按钮会触发表单的默认提交行为，导致页面刷新，这时候AJAX请求还没完成就被中断了，自然看不到结果。需要在start函数里阻止表单的默认提交行为。

3. 可能缺少jQuery依赖 #

你的JS用了$.ajax，这是jQuery的方法，如果你的HTML里没有引入jQuery库，浏览器会报错$ is not defined，虽然你说没报错，但最好确认是否引入了jQuery。

修复后的完整代码 #

修复后的JavaScript代码 #

function start(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    
    $.ajax({
        type: 'GET',
        url: '/api/domain/showall.php',
        success: function (response) {
            // 直接使用AJAX返回的response内容
            document.getElementById("1").innerHTML = '<input type="text" value="' + response + '">';
        },
        // 加上error回调，方便排查问题
        error: function(xhr, status, error) {
            console.log("AJAX请求出错：", error);
        }
    });
}

修复后的HTML表单部分 #

<form method="GET" onsubmit="start(event)">
    <button type="submit" class="btn btn-lg btn-block btn-primary">Contact us</button>
</form>

补充：引入jQuery库 #

在HTML的<head>里加上jQuery的引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

额外优化建议 #

• 把ID从1改成更有意义的名字，比如domain-list，这样代码可读性更高，也避免潜在的兼容问题。
• 你的PHP输出的是多个url直接拼接在一起，如果要每个url单独处理，建议PHP返回JSON格式的数据，而不是直接输出字符串。比如PHP改成：

<?php 
$jsonContents = file_get_contents('../data/data.json'); 
$data = json_decode($jsonContents, true); 
// 返回JSON格式的url数组
echo json_encode(array_column($data, 'url')); 
?>

然后JS里可以解析这个JSON，生成更丰富的HTML：

success: function (response) {
    const urls = JSON.parse(response);
    let html = '';
    urls.forEach(url => {
        html += '<input type="text" value="' + url + '"><br>';
    });
    document.getElementById("domain-list").innerHTML = html;
}

这样处理起来更灵活，也更容易维护。

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