Ajax帖子通話不適用於移動設備

Question

Rails和Ajax的新手。

我創建了一個小型Web應用程序，用戶可以通過按一個按鈕簡單地計算其步數。 完成后，用戶單擊提交，並保存步驟數。

這一切在我的電腦上都很好用。 但是，當我在移動設備上嘗試此操作時，沒有保存步驟數。 我不知道為什么會這樣。

我的代碼如下所示：

<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請求需要較長的時間才能通過慢速連接執行，因此在腳本重定向自身之前，成功調度的可能性較小。

然而，正如我在評論中提到的，你想實現並不需要AJAX的東西。 您可以同步發布具有相同數據的HTML表單，而用戶將不知道區別。