將Javascript變量傳遞給PHP，然后不刷新就重新加載頁面

Question

通過Ajax將javascript變量發送到PHP后，如何重新加載頁面而不刷新。

下面是我正在創建的網頁的圖像，該網頁分析了資產績效。

我想要做的是以下內容。

當用戶在圖中選擇帶有的測試塊時，選擇框將使用該特定測試塊內的所有子測試進行更新。 但是，我不想刷新頁面。 我已經設法通過ajax將選定的測試塊發送到PHP代碼，但是沒有刷新就無法使ajax重新加載頁面。

當前，當選擇一個測試塊時，標簽返回到PHP，並存儲在$ _SESSION ['label']變量中。 然后在面板標題＃subtest-chart-select中使用它。 但是，如果沒有頁面刷新，標簽將不會更新，這是我要避免的事情。

阿賈克斯：

$("#test_block_chart").click(
    function(evt){
        var activePoints = myNewChart.getElementsAtEvent(evt);
        if (activePoints[0]) {
            var chartData = activePoints[0]['_chart'].config.data;
            var idx = activePoints[0]['_index'];
            var label = chartData.labels[idx];
            //alert(label);

            $.ajax(
                {
                    url:'test_performance.php',
                    type: 'POST',
                    datatype: 'json',
                    data: {'label':label},   // post to location.php
                    success: function(label) {
                    // success
                 },

                 error: function(label) {
                     alert("There may an error on uploading. Try again later");
                 }

             });

         }
     });
 });`

PHP：

session_start();

if(isset($_POST['label']))
{
    $_SESSION['label'] = $_POST['label'];
}

PHP回顯HTML

<?php
    echo '<div class="row">
              <div class="col-lg-12 subtest-select">
                  <div class="panel panel-default">
                      <div class="panel-heading">
                          <h3 class="panel-title" id="subtest-chart-select"><i class="fa fa-bar-chart-o fa-fw"></i>' . $_SESSION['label'] . ' Subtest Select </h3>
                      </div>
                      <select class="form-control">
                          <option>1</option>
                      </select>
                  </div>
              </div>
         </div>'
     ?>

我仍然要編寫PHP代碼來更新所選測試塊中的子測試選項。

任何幫助將不勝感激，因為我一直在努力使這項工作永遠實現。

Answer 1

在$ .ajax（）中設置

dataType: 'text',

在$ .ajax（）成功函數中說：

success: function(data) {
    $('.inside_whereever_you_want_to_show_this').html(data);
}

編輯：

要僅更新頁面上的一個值，您可以：

a）在PHP中僅打印此值（這樣整個頁面將僅是此值）。

<?php echo $_SESSION['label']

並在HTML中加上要更新的位的范圍（避免在javascript中構造更長的字符串，所有常量部分都應在HTML中）

<h3 class="panel-title" id="subtest-chart-select"><i class="fa fa-bar-chart-o fa-fw"></i><span class="subtest-updateable">' . $_SESSION['label'] . '</span> Subtest Select </h3>

那么您就可以只用整體響應來更新您所需的位

success: function(data) {
    $('.subtest-updateable').html(data);
}

b）更好的（采用系統的方法）將使用json響應，在這里您還可以返回更多的隔離變量：

• 將dataType設置為json。
• 成功函數將使用$（'。subtest-updateable'）。html（data.label）
• 在PHP中打印json_encode（array（'label'=> $ _SESSION ['label']，'someelse'=> $ someother_variable））
• 您仍然應該在頁面的可更新位周圍放置span（或其他html元素）（以避免將常量寫入JavaScript）

Answer 2

在成功功能中，您需要更新要更改的DOM部分。 在PHP方面，只需返回刀片的部分內容或要顯示的任何HTML。

$(document).on('submit', 'form#form-grad', function (e) {
    e.preventDefault();
    var context = $(this);
    var thisForm = context.closest('form');

    $.ajax({
        url: thisForm.attr('action'),
        method: 'PUT',
        data: thisForm.serialize(),
        success: function (response) {
            $('#updatearea').html(response.pt_html);
             // Close grading form
        }
    });

    return false;
});