javascript - Ajax 后调用无法在移动设备上运行

Question

rails 和 ajax 新手。

我创建了一个小型网络应用程序，用户只需按下按钮即可计算步数。完成后，用户单击“提交”，步骤数将被保存。

这在我的电脑上运行得很好。但是，当我在移动设备上尝试此操作时，步骤数不会被保存。我不明白这是为什么。

我的代码如下所示:

<script type="text/javascript">
$(document).ready(function(){

var index = 0;

function resetcounter() {
  index = 0;
  document.getElementById("button1").value = index;
}

function count(){
  index += 1;
  document.getElementById('button1').value=index;
}

$('#button1').click(function() {
    count();
});

$('#resetButton').click(function() {
    resetcounter();
});

$('#submitButton').click(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
    $.ajax({
      url : "/steps",
      type: "POST",
      data: {
        step: {
          stepcount: index
        }
      },
      success: function( data, textStatus, jQxhr ){ $('#response pre').html( data ); }, 
      error: function( jqXhr, textStatus, errorThrown ){ console.log( errorThrown ); }
    });
    window.location = '/steps';
  });

});

<div class="panel panel-default center">
  <div class="panel-heading">
    <h2>Count your steps</h2>
  </div>
  <div class="panel-body">
<input type="button" class="btn btn-default btn-circle" id="button1" value="0"/>
  </div>
  <div class="panel-footer">
    <button type="button" id="submitButton" class="btn btn-default ">Submit</button>
    <button type="button" id="resetButton" class="btn btn-default">Reset</button>

  </div>
</div>

Answer 1

您的代码存在的问题是您在 AJAX 请求有机会完成之前重定向了用户(导致行为不稳定)。

如果您执意要使用当前的实现，则可以通过将 window.location 重定向移至成功回调内部来解决此问题，这样它仅在 AJAX 响应成功返回后才进行重定向。

$('#submitButton').click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        url: "/steps",
        type: "POST",
        data: {
            step: {
                stepcount: index
            }
        },
        success: function (data, textStatus, jQxhr) {
            $('#response pre').html(data);
            window.location = '/steps';
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});

您在移动设备上看到此行为的原因是因为 AJAX 请求在速度较慢的连接上执行需要更长的时间，因此在脚本自行重定向之前成功分派(dispatch)的机会较小。

但是，正如我在评论中提到的，您想要实现的目标不需要需要 AJAX。您可以同步 POST 具有相同数据的 HTML 表单，并且用户不会知道其中的差异。