如何在子页面提交成功后刷新父页面指定DIV而不重载整页？

要实现弹窗成功提交后仅刷新父页面的bottomButtons2 DIV而非整个页面，核心思路是直接调用父页面已有的showJobs函数——这个函数原本就是用来更新该DIV内容的，无需重新写逻辑。以下是两种可行的实现方式：

方法一：利用父页面全局变量（更简便） #

1. 修改父页面的showJobs函数，新增全局变量保存当前的查询参数str：

// 父页面全局变量，保存当前调用showJobs的参数
let currentJobStr = "";

function showJobs(str)
{
    currentJobStr = str; // 保存参数到全局变量
    if (str == "") 
    {
        document.getElementById("bottomButtons2").innerHTML = "";
        return;
    }
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() 
    {
        document.getElementById("bottomButtons2").innerHTML = this.responseText;
    }
    xhttp.open("GET", "getInfo.php?f=3&q="+str);
    xhttp.send();
}

2. 修改Action.php的成功处理代码，调用父页面的showJobs函数后再关闭弹窗：

<?php
// 保留原有的表单处理、MySQL操作逻辑

// 成功后执行：调用父页面函数刷新DIV，再关闭弹窗
echo "<script>
// 检查父页面是否存在且全局变量可用
if (window.opener && window.opener.currentJobStr !== undefined) {
    window.opener.showJobs(window.opener.currentJobStr);
}
window.close();
</script>";
?>

方法二：通过URL传递参数（无需修改父页面全局变量） #

如果不想在父页面新增全局变量，可以通过URL将str参数传递到弹窗，再带到Action.php中：

1. 修改父页面打开弹窗的代码，带上当前的str参数：

// 假设打开弹窗的按钮点击函数是这样的
function openAddPopup(str) {
    // 将str作为URL参数传递给弹窗页面
    window.open(`你的弹窗页面路径.html?str=${str}`, '_blank', 'width=600,height=400');
}

2. 在弹窗页面中添加隐藏字段，将URL中的str参数随表单一起提交：

<!-- 弹窗页面的表单内 -->
<script>
window.onload = function() {
    // 从URL获取str参数
    const urlParams = new URLSearchParams(window.location.search);
    const str = urlParams.get('str');
    
    // 创建隐藏输入框，把str传递给Action.php
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'job_str';
    hiddenInput.value = str;
    document.querySelector('form').appendChild(hiddenInput);
}
</script>

3. 修改Action.php的成功处理代码，使用POST过来的参数调用父页面函数：

<?php
// 保留原有的表单处理、MySQL操作逻辑

// 获取弹窗传递的str参数，转义特殊字符避免JS语法错误
$str = addslashes($_POST['job_str']);

echo "<script>
if (window.opener && typeof window.opener.showJobs === 'function') {
    window.opener.showJobs('{$str}');
}
window.close();
</script>";
?>

两种方法都能实现仅刷新目标DIV的效果，不会重载整个父页面，完美保留之前加载的其他页面信息。

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