Ajax動態變量，無需刷新

Question

好的，所以我試圖在php / ajax中構建一個戰役腳本。 目前，我有一個帶有用戶動作的html表單和一個文本框（要測試），我正在使用ajax將動作發送到解析文件，然后回顯出他們選擇的動作。 我的問題是我知道如何做到這一點，因此當用戶提交表單時，存儲健康狀況的變量就會下降，但是我不知道如何在第一頁上顯示它。 所以我有第1頁，顯示了健康狀況，用戶選擇了一個攻擊，然后提交ajax，將轉移到第2頁，使健康狀況下降了，但是我不知道如何使健康狀況下降到第1頁，而沒有刷新？即使我在用戶提交時將其關閉，我也不知道如何使其動態顯示。 我希望我已經盡力了。

到目前為止，這是我編寫的代碼。

我的阿賈克斯

<script language="JavaScript" type="text/javascript">
function ajax_post(){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "my_parse_file.php";
    var sF = document.getElementById("selectionField").value;
    var ln = document.getElementById("last_name").value;
    var vars = "selectionField="+sF+"&lastname="+ln;
    hr.open("POST", url, true);


    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
   var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
   }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = "processing...";
}



</script>
 <script type="text/javascript">
var x = <?php echo $phpx; ?>;
 var div = document.createElement("DIV");
 div.appendChild(document.createTextNode(x));
 document.body.appendChild(div);
 </script>

然后div和html表單

 <select size="3" name="selectionField" id="selectionField" multiple="no" > 
    <option value="move1" >California -- CA </option>
    <option value="move2" >Colorado -- CO</option>
    <option value="move3" >Connecticut -- CN</option>
  </select>
  <br />
  <br />
  Your Last Name: 
  <input id="last_name" name="last_name" type="text" />
  <br />
  <br />
  <input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
  <br />
  <br />
</p>

</p>

<div id="status"></div>

因此，如果我像第1頁上的php中那樣正常發出健康提示，則用戶選擇了atatck，然后將其動態發送到第2頁，第2頁使hp下降/ php會話下降。 但是因為我會在第一頁上回顯php中的變量，所以它不會動態改變。 所以我想我將不得不將變量存儲在side ajax中？

編輯這里是你們經歷過的一個例子。

       <script type="text/javascript">
    $.ajax({
      url: 'my_parse_file.php',
      type: 'POST',
      data: '{id: $('#nick').val() }'
      success: function(data){
       $('#hp').html(data);
      }
      }
    });
     </script>

<div id="hp"><?php echo $nick ; ?></div>

這是我在首頁添加的代碼，然后在my_parse_file.php一側，我有$ nick ='1'; 但是它什么也沒顯示...

Answer 1

您可以執行以下操作： jQuery檢查ajax發布是否成功

然后，您實際上不需要提交，而只需通過純jquery更新當前頁面。

編輯

<script language="JavaScript" type="text/javascript">
    $(function() {
        $('#buttonAttack').click(function (){
        $.ajax({
                url: 'my_parse_file.php',
                type: 'POST',
                data: {id: $('#nick').val() }
                success: function(data){
                    $('#hp').html(data);
                }
             });
    });
    });
</script>
<div id="hp"></div>
<input id='buttonAttack' type='button' value='Attack!' />

Answer 2

第1步）將腳本切換到jquery ajax（出於理智的考慮，建議使用）

反過來會導致

$.ajax({
  url: 'your_php_page.php',
  type: 'POST',
  data: '{id: $('#last_name').val() }'
  success: function(data){
   $('#status').html(data);
  }
  }
});

URL：是您的php數據的鏈接：是php將看到的所有變量$ _POST

your_php_page.php執行提取/模型並回顯結果的位置。 完成后，“數據”就是返回的回顯，您將用任何所需的html替換#status id。

編輯：要回答您添加的代碼-您混合使用php和javascript錯誤

使用$（'＃hp'）。html（data），您已經在回顯從php文件接收的數據。 那就是為什么javascript是客戶端和php是服務器端的原因。