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

【问题标题】：Ajax working odd on mobile and touch screen devicesAjax 在移动和触摸屏设备上的工作很奇怪
【发布时间】：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 导致双重消息出现......这很清楚......现在我不明白的是：为什么当我尝试提交时我的验证消息消失了在编辑页面上
现在我知道了......这是因为移动和触摸设备上的超时......他们有这个超时足以让事情不能按我想要的那样工作......我该如何解决这个问题？

标签： jquery ajax laravel validation

【解决方案1】：

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

【讨论】：