javascript - 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');

请告诉我们这是否有效。