将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;
});