使用不同浏览器时刷新问题。

Question

所以我的主要问题是如何以适用于每个浏览器的方式解决这个问题。我在一个页面上有一堆脚本，当单击一个按钮时，它将刷新页面，提交表单并更新数据库中的内容。

• 使用Safari时，所有这些都能顺利而精美地工作。
• 使用Chrome时，会出现占用警告，重复提交表单，您需要关闭该页面。
• 当使用Firefox时，我得到一个奇怪的错误，然后它看起来像刷新一次，但脚本运行了足够的次数导致错误。

我对这个问题的目标是，如果我修复其中一个脚本，可能所有脚本都与我解决它们的方式类似。一个想法是我必须使用AJAX，但我不能100％确定是否需要它。

这是我的代码：

<div id="TameWindow" class="PopWindow">
    <div class="popup">
        <div class="close" onclick="document.getElementById('TameWindow').style.display='none'">x</div>
        <div class="content">
            <h2>Tame my horse <?php echo $HorseName ?><br/></h2>
        </div>
        <div class="content">
        Taming your horse allows you to be able to train them in specific skills and enter them in competitions.<br/>
        <form name="TameHorse" method="POST">
        <select id="TameDuration" name="TameDuration" onchange="TameInfo()">
          <option value=".5">30 mins
          <option value="1">1 hour
          <option value="1.5">1 hour 30 mins
          <option value="2">2 hours
          <option value="2.5">2 hour 30 mins
          <option value="3">3 hour
          <option value="3.5">3 hours 30 mins
          <option value="4">4 hours
          <option value="4.5">4 hours 30 mins
          <option value="5">5 hour     
        </select>
        <input type="submit" name="TameSub" value="Tame">
        </form>
        <!--This is what displays on change of the variable -->
        <script>
        function TameInfo() 
        {
            var x = document.getElementById("TameDuration").value;
            var TameEnergy = x * 10;
            document.getElementById("TameInfo").innerHTML = "-" + TameEnergy + "% energy";
        }
        </script>
        <p id="TameInfo"></p>


        <!--This is the script to Tame the horse -->
        <?php
        $TDuration = $_POST['TameDuration'];
        $SubTame = $_POST['TameSub'];
                $IntellIncrease = $TDuration * 2;
                $EnergyDeduct = $TDuration *10;
                $TameIncrease = $TDuration *4;
            $TameEnergy = $Energy - $EnergyDeduct;
            $TameIntell = $Intell + $IntellIncrease;
            $TameGain = $Tame + $TameIncrease;  


        //This is the Query to update the horse's Energy, Intelligent points and Tame
        if($SubTame)
                {
                    if($TameEnergy <= 0)
                    {
                        ?>
                        <script>alert("Your horse doesn't have enough energy for that!");</script>
                        <?php
                    }
                    else
                    {
                    $TameMyHorse = "UPDATE Horse SET Energy='$TameEnergy', IntelligenceP='$TameIntell', Taming='$TameGain' WHERE id='$colname_HorseInfo'";


                    if ($con->query($TameMyHorse) === TRUE)
                    {
                        ?>
                        <script>location.reload();</script>
                        <?php
                    } 
                    }
                }       
        ?>
        </div>
    </div>
</div>

我不确定我的location.reload()脚本中是否只有错误，或者是否需要重写整个内容才能使用多个浏览器。但我不想删除我的所有代码并重新开始，如果它只是一个我不知道的简单修复。

Answer 1

我强烈建议你使用Ajax。你把它标记为jQuery所以

1. 用{/ li>之类的内容替换function TameInfo()

   function TameInfo() { 
     var x = $("#TameDuration").val(); 
     var TameEnergy = x * 10; 
     $("TameInfo").html("-" + TameEnergy + "% energy"); // show the value
     setTimeout(function() { // give user time to see it 
       $.post("train.php",{"TameDuration":x},
         function(values) { 
           var message = values.error? values.error :
             "Increase:"+values.TameIncrease +
             "<br/>Deduct:"+va‌​lues.EnergyDeduct +
             ".....";
           $("TameInfo").html(message);
       }); 
     },2‌​000); 
   }
   

   应该修改
   1. train.php以提供json_encode（values），其中values是一个包含所有
   的关联数组

   if($TameEnergy <= 0) {
      $values = array('error'=>"Your horse doesn't have enough energy for that!");
    }
   else {
     $values = array( 'IntellIncrease' => $TDuration * 2, 
       'EnergyDeduct' => $TDuration *10, 
       'TameIncrease' =>$TDuration *4, 
       'TameEnergy' => $Energy - $EnergyDeduct, 
       'TameIntell' => $Intell + $IntellIncrease, 
       'TameGain' => $Tame + $TameIncrease,
       'error'=>"");
       $TameMyHorse = "UPDATE Horse SET Energy='$TameEnergy', IntelligenceP='$TameIntell', Taming='$TameGain' WHERE id='$colname_HorseInfo'";
   
    }
    header("Content-type: application/json");
    echo json_encode($values);