将 Javascript 变量传递给 PHP，然后重新加载页面而不刷新答案

【问题标题】：Passing Javascript variable to PHP and then reloading page without refresh将 Javascript 变量传递给 PHP，然后重新加载页面而不刷新
【发布时间】：2017-09-19 19:52:48
【问题描述】：

在通过 Ajax 将 javascript 变量发送到 PHP 后，如何在不重新刷新的情况下重新加载页面。

下面是我正在创建的用于分析资产性能的网页图片。

我正在尝试做的是以下内容。

当用户在图表中选择一个测试块时，选择框会更新为该特定测试块中的所有子测试。但是，我不想刷新页面。我已设法通过 ajax 将选定的测试块发送到 PHP 代码，但无法在不刷新的情况下让 ajax 重新加载页面。

Currently, when a test block is selected, the label is return to PHP and is stored in the $_SESSION['label'] variable.然后在面板标题#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 代码来更新所选测试块中子测试的选项。

任何帮助都将不胜感激，因为我一直在努力让它看起来永远工作。

【问题讨论】：

也许你正在寻找这个jQuery函数api.jquery.com/load我不确定完全理解这个问题。
@Polak 我已经更新了这个问题，以便更清楚地了解我想要什么以及目前正在做什么。请参阅代码 sn-ps 之前介绍中的最后一段
好吧，正如我所见，下面的 2 个答案几乎是一回事，你必须用你的 ajax 响应中的 html 替换你想要“刷新”的区域。 jQuery.load() 可以做到这一点，并且 $('#updatearea').html('
anything
') 也可以。

标签： javascript php ajax

【解决方案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）

【讨论】：

这似乎是将页面的全部内容放入指定的div中。我只想用更新的 PHP $_SESSION 值重新加载那个特定的 div。为了更清楚，我已经更新了原始问题

【解决方案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;
});

【讨论】：