[英]Ajax post call not working on mobile
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>
代码的问题在于,您要在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表单,而用户将不知道区别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.