Ajax Post请求在移动设备上不起作用

西缅·伊库达博

我遇到一个问题,我在jQuery中.on('click')事件之后向服务器发送了Ajax发布请求,但是Ajax请求在移动设备上不起作用。在桌面设备上,它可以正常工作。那使我进行了一些研究。我发现的第一个问题是click事件可能未在触摸屏设备上注册,但这不是问题。当我在移动设备上触摸按钮时,发出一些警报消息后触发了触摸事件。在iOS和Android设备上,触摸事件都会触发,但Ajax请求不会触发。我还添加了touchstart确保事件将在触摸设备上触发。我研究的另一个潜在问题是,如果您未指定发布请求后从服务器返回的预期数据类型(纯文本,json等等),则iOS和Android设备上可能存在一些问题。我指定了dataType,但请求仍然存在问题。最后,我看到可能存在一些缓存问题,因此我将cache参数设置为false,并在标头中指定了no-cache这也没有解决问题。使用我尝试的每个“修复”,Ajax请求仍然可以在台式设备上完美执行,但在移动设备上则无法完美执行。如前所述,单击事件本身是在移动设备上注册的,因为当我在Ajax请求之前发出警报时,它们已显示在移动设备上。但是,Ajax请求本身不会执行。这是我的代码如下:

$('.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格式,但是经过进一步的审查,我发现没有证据支持这一点。这就是为什么我想知道我在这里可能会缺少什么。附带一提,我的表单与Button不在同一位置,因为我的Button在模式中。由于我使用的是表单数据,因此我假设实际表单中没有提交按钮不会引起问题,同样,这在台式机和笔记本电脑设备上也不是问题。

西缅·伊库达博

这是multipart / form-data,所以我需要更改enctype。这就是为什么我在某些设备上遇到问题的原因,并且自发布以来,该问题已得到解决。在ajax请求中,我只需要添加:

enctype: 'mutipart/form-data',

这样就解决了问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ajax 代码在移动设备上不起作用

来自分类Dev

Phonegap跨域AJAX POST请求在Android上不起作用

来自分类Dev

Phonegap跨域AJAX POST请求在Android上不起作用

来自分类Dev

Cordova / Phonegap:AJAX呼叫在iOS设备上不起作用

来自分类Dev

Ajax POST请求不起作用

来自分类Dev

Ajax Post请求不起作用?

来自分类Dev

Ajax Post请求不起作用?

来自分类Dev

Ajax请求在iPad 1(iOS 5.1.1)上不起作用

来自分类Dev

AJAX请求在远程主机上不起作用

来自分类Dev

Phonegap Jquery移动跨域ajax请求不起作用

来自分类Dev

AJAX在表上不起作用

来自分类Dev

单个Ajax Post请求在IE中不起作用

来自分类Dev

Ajax功能在移动浏览器上不起作用

来自分类Dev

Ajax Post,jQuery在ResponseData结果页面上不起作用

来自分类Dev

Skrollr在移动设备上不起作用

来自分类Dev

jQuery在移动设备上不起作用

来自分类Dev

parseFloat在移动设备上不起作用

来自分类Dev

Bootstrap在移动设备上不起作用

来自分类Dev

VueJS在移动设备上不起作用

来自分类Dev

ontouchstart在移动设备上不起作用?

来自分类Dev

jQuery在移动设备上不起作用

来自分类Dev

VueJS在移动设备上不起作用

来自分类Dev

Rems在移动设备上不起作用

来自分类Dev

Bootstrap在移动设备上不起作用

来自分类Dev

跨域AJAX请求不起作用

来自分类Dev

jQuery对AJAX请求不起作用

来自分类Dev

PhoneGap AJAX请求不起作用

来自分类Dev

jQuery:ajax获取请求不起作用

来自分类Dev

弹出表单ajax请求不起作用