Ajax 在移动和触摸屏设备上的工作很奇怪

Posted 2023-03-14

【中文标题】Ajax 在移动和触摸屏设备上的工作很奇怪

【英文标题】：Ajax working odd on mobile and touch screen devices

【发布时间】：2017-06-09 04:03:11

【问题描述】：

我的应用中有一个动态表单，可以实时编辑（添加或删除输入字段），但是当用户犯了一些错误并且没有正确填写某些内容时，我在验证时遇到了问题，所有新添加的字段都会消失并且这非常糟糕，因为用户必须重新创建他之前拥有的一切。

所以为了解决这个问题，我创建了一个 ajax 调用来检查验证是否正常：

// send ajax first to check validation so that the dynamic fields don't disappear
$(document).on('touchstart mousedown', ':submit', function() 
    $('input[name="items"]').val($('.item').length);
    var form = $("form");
    var myMethod = '';
    var myRoute = '';
    var orderId = "<?php if (isset($order->id))  echo $order->id;  else  echo false; ?>";

    if( $(this).val() === 'Make new order' && !orderId)
        myMethod = 'post'
        myRoute = '/orders'

     else 
        myMethod = 'post';
        myRoute = '/orders/edit/' + orderId;
    

    $.ajax(
        type: myMethod,
        url: myRoute,
        headers:  'X-CSRF-TOKEN': "csrf_token()" ,
        data: form.serializeArray(),
        dataType: 'json',
        success: function(data)
            console.log('validation success!');
        ,
        error: function(data) 
            var errors = data.responseJSON;
            var errorsArr = [];
            for (error in errors) 
                errorsArr.push(errors[error][0]);
            
            bootbox.alert(errorsArr.join("<br>"));
            console.log(errors);

        
    );
);

在我的控制器中我有这个：

public function store(OrdersForm $request)

    if($request->ajax()) 

        return response()->json();

     else 

        // save all...
    

问题是在计算机上一切正常，我收到了创建和编辑提交的验证消息，但在平板电脑和手机上，所有疯狂的事情都在发生......

我在创建和编辑时收到双重验证错误，我短暂收到验证消息，但它消失了我不知道在哪里调试...我如何才能看到手机上发生了什么？

【问题讨论】：

您可以使用 chrome 的内置开发工具来模拟（通过更改屏幕大小）移动设备。根据您的描述，听起来您的事件处理可能是个问题。是否需要 touchstart 和 mousedown？因为AFAIK你可以只鼠标按下？这可以解释重复

您似乎还覆盖了所有“提交”功能。如果您在该页面上触发了任何其他 ajax，这也导致它“提交”它会重复并表现得很奇怪。而是绑定到负责提交的按钮？

感谢您提供有关 chrome 调试的提示，我遇到了同样的问题，但现在至少我可以看到了

好的，由于 touchstart 和 mousedown 导致双重消息出现......这很清楚......现在我不明白的是：为什么当我尝试提交时我的验证消息消失了在编辑页面上

现在我知道了......这是因为移动和触摸设备上的超时......他们有这个超时足以让事情不能按我想要的那样工作......我该如何解决这个问题？

【参考方案1】：

您的代码是这样触发的，因为您需要将提交按钮更改为常规按钮，然后当您发送的用于检查验证的 AJAX 请求返回成功时手动触发表单提交。