Ajax动态变量不刷新

Question

好的，所以我正在尝试在 php / ajax 中构建一个战斗脚本。目前，我有一个带有用户移动的 html 表单和一个文本框（用于测试），我正在使用 ajax 将移动发送到一个解析文件，然后回显出他们选择的移动。 我遇到的问题是我知道如何制作它，所以当用户提交表单时，存储健康的变量会下降，但我不知道如何在第一页上显示它。所以我有第1页显示健康状况，用户选择攻击然后提交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>

因此，如果我在第 1 页的 php 中正常显示健康状况，则用户选择一个 atatck，然后将其动态发送到第 2 页第 2 页使 hp 下降/php 会话下降。但是因为我会在第一页的 php 中回显变量，所以它不会动态改变。所以我猜我必须将变量存储在侧 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 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（建议理智）

这反过来会导致

$.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(数据) 您已经回显了从 php 文件接收到的数据。 这就是为什么javascript是客户端而php是服务器端的原因。