Ajax動態變量不刷新

Question

好吧，所以我想在php/ajax中構建一個戰鬥腳本。目前，我有一個html格式的用戶移動和一個文本框（測試），我使用ajax將移動發送到一個解析文件，然後回顯出他們選擇的移動。 我遇到的問題是，我知道如何做到這一點，所以當用戶提交表單時，存儲健康狀況的變量會下降，但我不知道如何在第一頁上顯示它。所以我有page1健康顯示和用戶選擇一個攻擊，然後提交ajax將移動到第2頁，並使健康下降，但我不知道如何使健康下降第1頁與外出令人耳目一新？即使我讓它在用戶提交時失效，我也不知道如何讓它動態顯示。 我希望我已經解釋了最好的我可以。

這是我編碼到目前爲止。

我的AJAX

<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> 

所以，如果我回聲出健康的正常人一樣在PHP頁面1用戶在挑選一個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我有$缺口=「1」的代碼; 但它不顯示任何...

Answer 1

你可以做類似的措施： Jquery checking success of ajax post

那麼你並不真正需要提交，但只是以純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({ 
    url: 'your_php_page.php', 
    type: 'POST', 
    data: '{id: $('#last_name').val() }' 
    success: function(data){ 
    $('#status').html(data); 
    } 
    } 
}); 

網址：是鏈接到您的php 數據：全部變量$ _POST，php將會看到

其中your_php_page.php執行您的讀取/模型並回顯結果。 完成後，「數據」是返回的回聲，您將用任何你想要的html替換#status id。

編輯： 要回答你添加的代碼 - 從收到你混合你的PHP和JavaScript錯誤

與$（「＃惠普」）HTML（數據） 您已經回聲-ING回數據。該PHP文件。 這就是爲什麼JavaScript是客戶端和PHP是服務器端。