我遇到了一个问题,即在**.on之后向服务器发送 AJAX 发布请求('click')事件,但是 AJAX 请求在移动的设备上不起作用。在桌面设备上,它工作得非常好。这促使我做了一些研究。我发现的第一个问题是,click事件可能无法在触摸屏设备上注册,但这不是问题所在。触摸事件是在我在移动的设备上按下按钮时发出一些警告消息后触发的。在iOS和Android设备上,触摸事件都触发了。但不是 AJAX 请求。我还添加了touchstart以确保事件会在触摸设备上触发。我研究的另一个潜在问题是,如果在发布请求后不指定从服务器返回的预期数据类型,iOS和Android设备上可能会出现一些问题(纯文本、json等)。我指定了dataType,但请求仍然存在问题。最后,我发现可能存在一些缓存问题。所以我该高速缓存参数设置为false,并在头中指定no-cache**。这也没有解决问题。在我尝试的每个“修复”中, AJAX 请求仍然可以在桌面设备上完美执行,但在移动的设备上却不行。正如我提到的,其中的click事件本身是在移动的设备上注册的,因为当我在 AJAX 请求之前发出警报时,它们会显示在移动设备上。2然而,Ajax请求本身不会执行。3下面是我的代码:
$('.crop_image').on('click touchstart', function(event){
alert("Triggered"); //Event triggered on mobile devices
$image_crop.croppie('result', {
size: 'viewport',
format: 'png',
type: 'blob'
}).then(function (blob){
$form = $('#uploadForm');
var fd = new FormData($form);
fd.append('upload_image', blob);
$.ajax({
url: "handle-image.html",
type: "POST",
data: fd,
processData: false, //processData false
contentType: false, //contentType false
dataType: "text", //response will be text
cache: false, //cache false
headers: {
"cache-control": "no-cache" //set headers
},
success: function (data){
alert("Upload Successful"); //Only succeeds and executes on desktop
$('#uploadImageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
我很难理解为什么在移动的设备上会失败。我认为一个问题可能是我通过 AJAX 发送blob,移动设备可能无法处理blob格式,但经过进一步的检查,我没有看到任何证据支持这一点。这就是为什么我想知道我在这里错过了什么。作为一个附带说明,我的表单和按钮不在同一个地方,因为我的按钮是模态的。2因为我使用的是表单数据,所以我假设实际表单中没有提交按钮不会导致问题,同样,这在台式机和笔记本电脑设备上也不是问题。
2条答案
按热度按时间g0czyy6m1#
这是multipart/form-data,所以我需要更改加密类型。
这就是为什么我在一些设备上有问题,自从这篇文章以来,这个问题已经解决了。
在 AJAX 请求中,我只需要添加:
这就解决了问题。
icomxhvb2#