AJAX 成功后刷新 div

Question

关于这个主题有很多 Stack Overflow 问题，但似乎没有一个对我有用。

这可能是因为我需要在 div 刷新时调用 PHP 函数以更新信息。

我有一个#tab-project-CD-smt_test div，它显示了三个版本（生产、暂存和最新）。用户可以单击暂存或最新旁边的箭头以将其向上移动。我通过使用 AJAX 请求使这部分工作正常：

    function sendToStaging (dir, type, subtype, version) {
        //Need selected category, selected type, selected subtype 
        $.ajax({
            type: 'POST',
            url: 'configs.php',
            data: 'function=sendToStaging'+'&dir='+dir+'&type='+type+'&subtype='+subtype+'&version='+version, 
            success: function() {
//                 window.location.reload(true);
                $('#deployed').load(document.URL);
            }
        });

    };

    function sendToProduction (dir, type, subtype, version) {
        //Need selected category, selected type, selected subtype 
        $.ajax({
            type: 'POST',
            url: 'configs.php',
            data: 'function=sendToProduction'+'&dir='+dir+'&type='+type+'&subtype='+subtype+'&version='+version
        });

如果成功，我想刷新在我的 PHP makeInfoSection 中创建的 #deployed div。摘录如下：

// list latest, staging, production
$html .= '<h4>Deployed Versions</h4>';
$html .= '<ul class="list-group" id="deployed">';

$html .= '<li class="list-group-item">';
$html .= '<span class="badge">production</span>';
$html .= $production.'</li>';

$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><a href="#" style="color:orange"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true" onclick="sendToProduction('."'$dir', '$type', '$subType', '$staging'".')"></span></a></span>';


$html .= '<span class="badge">staging</span>';
$html .= $staging.'</li>';

$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><a href="#" style="color:orange"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true" onclick="sendToStaging('."'$dir', '$type', '$subType', '$latest'".')"></span></a></span>';



$html .= '<span class="badge">latest</span>';
$html .= $latest.'</li>';
$html .= '</ul>'; 

在 HTML 中调用该方法：

<div class="col-md-5 col-md-push-1 col-sm-6">
        <div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
            <?php
                foreach ($project_types as $type) {
                    // @TODO remove once folder structure is all setup
                    if ($type !== 'CD') continue;

                    foreach ($project_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-project-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }

                foreach ($workflow_types as $type) {
                    foreach ($workflow_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-workflow-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }
            ?>
        </div>
    </div>
</div>

所以在 AJAX 成功后，我需要刷新它。我试过$('#tab-project-CD-smt_test').load(document.URL); 但这似乎没有任何作用。我也尝试过调用makeInfoSection 方法，但这并没有将它添加到 HTML 中，所以我对它不起作用并不感到惊讶：

$approved_functions = array('sendToProduction', 'sendToLatest', 'sendToStaging');
if(array_key_exists('function', $_POST) && in_array($_POST['function'], $approved_functions)) {
    // call the approved function
    $dir = $_POST['dir']; 
    $type =  $_POST['type']; 
    $subType = $_POST['subtype']; 
    $version = $_POST['version']; 
    $_POST['function']($dir, $type, $subType, $version);
    makeInfoSection($type, $subType, $versions, $dir); 
}

关于如何让这个div 刷新有什么想法吗？

Answer 1

@tibsar，您提到#deployed 在您的页面中并不是唯一的。 While you should try to avoid this，为了回答你的问题，你提到 #tab-project-CD-smt_test 是独一无二的，所以 ajax 加载应该适合你。

如果您想使用 .load，请在您的 success 回调中尝试：

$('#tab-project-CD-smt_test').load(document.URL + ' #tab-project-CD-smt_test');

让我们知道这是否有效。