Question

我遇到一个问题，我在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在模式中。由于我使用的是表单数据，因此我假设实际表单中没有提交按钮不会引起问题，同样，在台式机和笔记本电脑设备上这也不是问题。

Answer 1

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

enctype: 'mutipart/form-data',

这解决了问题。

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

1 个答案: