Javascript Ajax post调用在移动设备上不起作用

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';
  });

});

$（文档）.ready（函数（）{
var指数=0；
函数resetcounter（）{
指数=0；
document.getElementById（“button1”）。值=索引；
}
函数计数（）{
指数+=1；
document.getElementById（'button1'）。值=索引；
}
$（'#按钮1'）。单击（函数（）{
计数（）；
});
$（“#重置按钮”）。单击（函数（）{
重置计数器（）；
});
$（“#提交按钮”）。单击（函数（e）{
e、 预防默认值（）；
e、 停止即时复制（）；
$.ajax({
url:“/steps”，
类型：“POST”，
数据：{
步骤：{
步数：索引
}
},
成功：函数（data，textStatus，jQxhr）{$（'#response pre'）.html（data）；}，
错误：函数（jqXhr，textStatus，errorThrown）{console.log（errorThrown）；}
});
window.location='/steps'；
});
});

数一数你的脚步
提交
重置

代码的问题是在AJAX请求有机会完成之前重定向用户（导致行为不稳定）

如果您死心塌地地使用当前的实现，您可以通过将

窗口.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表单，用户将不知道它们之间的差异。

在手机上有时有效，有时无效。刚刚向heroku部署了一个版本来测试->如果在等待响应之前要重定向到

/steps

，为什么要使用AJAX？我使用AJAX的原因是我想在数据库Step中的变量stepcount下存储值索引。因此，用户可以查看索引页中的所有记录，并查看每条记录的步骤数。请参阅下面的我的答案，然后尝试一下！这对我很有用：-）也可以尝试一下不使用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);
        }
    });
});