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是服务器端的原因。