PHPにJavascript変数を渡してから、リフレッシュせずにページをリロードする

Question

JavaScriptにAjax経由でJavaScript変数を送信した後、ページを再読み込みせずにリロードするにはどうすればよいですか？

以下は、資産のパフォーマンスを分析する作成しているウェブページのイメージです。

私がしようとしていることは次のとおりです。

ユーザがグラフ内でテストブロックを選択すると、その特定のテストブロック内のすべてのサブテストを使用して、選択ボックスが更新されます。しかし、私はページを更新したくありません。選択したテスト済みのブロックをajax経由でPHPコードに送信できましたが、リフレッシュせずにページをリロードするためのajaxを取得することはできません。

現在、テストブロックを選択すると、ラベルはPHPに戻り、$ _SESSION ['label']変数に格納されます。これは、panel header＃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

成功関数では、変更したいDOMの部分を更新する必要があります。 PHP側では、表示したいHTMLの部分的な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; 
}); 

Answer 2

（）あなたの$アヤックス（）成功機能で

dataType: 'text', 

を設定するには言う：

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に設定します。
• 成功関数は$を使用します（ 'サブテスト-更新可能 '）。htmlの（data.label）
• PHP印刷json_encodeで（配列（' ラベル' => $ _SESSION [ 'ラベル'] 'someelse' = > $のsomeother_variable））
• あなたはまだ（）あなたのjavascriptへの書き込み定数を避けるために、あなたのページの更新可能なビットの周りのスパン（またはいくつかの他のhtml要素）を置く必要があります