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>
答案 0 :(得分: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。您可以使用相同的数据同步POST一个HTML表单,用户不会知道其中的差异。