javascript - 使用 HTML 按钮的 Ajax 日志数据

Question

我使用带有 php 和 javascript 的服务器端事件在我的网站上显示实时数据，这按预期工作。为了进行测试，当新交易出现在我的页面上时，我记录了值 lastEventId。

lastEventId 仅包含一个值，并随着每个新事务递增。

我有一个 html 按钮，单击该按钮时，还应记录 lastEventId 的值。但是它记录了多个值，它似乎保留了以前的值。

见下图；

我想要的结果是，单击“开始”按钮一次并显示单个值 - 最近的 lastEventId。因此，在上图中它应该记录；

The last serial received was 20543969.

不是前两个。

我的html页面如下；

<script type="text/javascript">
       var source = new EventSource("script.php");
           source.onmessage = function(event){
               document.getElementById("result").innerHTML += "New transaction: " + event.data + "<br>";

           $("#start").click(function(){
               $.ajax({
                   type: "POST",
                   url: 'script.php',
                   data: {lastSerial: lastSerial},
                   success: function(data){
                       console.log(data);
                   }
               });
           });
      }; // end on.message
</script>
<button id="start"> start</button>

我的 PHP 文件；

if(isset($_POST['lastSerial'])) {
    $lastSerial = $_POST['lastSerial'];
    echo "The last serial received was ". $lastSerial .".";
}

我是否需要在每次点击后以某种方式“重置”该值？

我确定我正在做一些非常愚蠢的事情。感谢您的帮助。

Answer 1

对于每条消息，您都在向按钮添加一个新的点击处理程序。单击处理程序只能添加一次。

<script type="text/javascript">
$(document).ready(function() {
       var lastSerial;
       var source = new EventSource("script.php");
           source.onmessage = function(event){
               lastSerial = event.lastEventId;
               document.getElementById("result").innerHTML += "New transaction: " + event.data + "<br>";
      }; // end on.message
       $("#start").click(function(){
           $.ajax({
               type: "POST",
               url: 'script.php',
               data: {lastSerial: lastSerial},
               success: function(data){
                   console.log(data);
               }
           });
       });
});
</script>
<button id="start"> start</button>