Ajax后调用无法在移动设备上工作
Ajax post call not working on mobile
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>
代码的问题是在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表单,用户不会知道其中的区别。
相关文章:
- 链接don'由于Javascript悬停效果,无法在移动设备上工作
- Phonegap地理定位无法在移动设备上工作
- Jquery.focusout无法在移动设备上工作(slicknav)
- 移动/平板设备定向部分工作
- 当我移动引用three.js的html文件时,three.js停止工作
- AngularJS代码在一个代码笔中工作,但在移动时会中断
- 我将此代码移动到一个单独的函数中,它停止工作,为什么
- 下拉在移动设备上工作很奇怪
- Foundation 5和内容可编辑(移动)不工作
- Bootstrap 3.3-导航栏无法在移动设备上工作
- 我可以'我似乎没有得到我的网站'移动导航开始工作
- 使用jQuery在焦点上选择文本框是't在移动浏览器中工作
- 针对移动设备的JQuery下拉列表没有以应有的方式工作
- 上的jQuery.on('已结束')无法在移动设备上工作
- 如何将img维度从html移动到css并保持此滑块工作
- jQuery 移动按钮无法按预期工作
- window.open()没有'无法在添加到主屏幕的移动Safari web应用程序中工作
- 如何使此应用程序与移动浏览器协同工作
- 可以'不要让HTML5音频标签在移动浏览器上工作
- 滚动不'在移动浏览器中执行手势操作后无法工作