Question

如何在通过Ajax向PHP发送javascript变量后重新加载页面而不重新刷新。

以下是我创建的分析资产效果的网页图片。

我想要做的是以下几点。

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

目前，当选择测试块时，标签将返回PHP并存储在$ _SESSION [＆＃39;标签＆＃39;]变量中。然后在面板标题＃subtest-chart-select中使用它。但是，如果没有页面刷新，标签将不会更新，这是我想要避免的。

的Ajax：

$("#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 echo 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'=＆gt; $ _SESSION ['label']，'someelse'=＆gt; $ 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;
});

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

2 个答案: