jquery Select2 防止在 ajax 响应中选择

如果在我的数据库中首先创建行失败，我想阻止向 Select2 元素添加类别。当我调用 ev.preventDefault() 时，该操作不会被阻止；什么也没发生..出了什么问题？

    $('#sel2').select2({
            placeholder: 'Enter categories',
            minimumInputLength: 3,
            multiple: true,
            ajax: {
                url: 'async/get_categories.php',
                dataType: 'json',
                quietMillis: 250,
                data: function (term, page) {
                    return {
                        q: term,
                    };
                },
                results: function (data, page) {
                    return {
                        results: data.items 
                    };
                },
                cache: true
            },
            formatResult: format,
            formatSelection: format
        }).on('select2-selecting', function(e) {
            console.log(e);
            if (e.val == 4) {
                // if category id equals 4
                // do not add this category to select 2
                // e.preventDefault();
                // the above works just fine and its just for testing
            }

            // Is something wrong here?
            var ev = e;

            $.ajax({
                type: 'POST',
                url: 'async/create_profile_category.php',
                data: {
                    profile_id: '1', 
                    category_id: ev.val
                },
                success: function(response) {
                    console.log(response);
                    if (response.error === false) {
                        // category assigned successfully
                    } else {
                        // failed to assign category
                        // so i want now to prevent from adding to select2
                        console.log('should not add this category');
                        ev.preventDefault();
                        // the above is not working
                    }
                },
                error: function() {
                    alert('Failed to assign category!');
                }
            });
        });

AJAX 请求是异步发出的，因此当它完成时，元素已经被添加。即使你打电话ev.preventDefault()，想要有所作为就已经太晚了。所以这给你留下了两个选择：

1. 同步发出请求，这将允许preventDefault有所作为。
2. 异步发出请求，如果失败则手动删除该元素。

两种选择都有其优点和缺点，由您决定选择哪个选项。

1. 同步发出请求

Pros

• 如果请求失败，该值将永远不会被添加。
• 在无法经常添加元素的情况下效果很好。

Cons

• 阻止 UI - 因此，在发出请求时，用户可能会看到一个无响应的页面。

2. 异步发出请求

Pros

• 不阻塞 UI。
• 在通常可以添加元素的情况下效果很好。

Cons

• 该值将始终向用户显示，即使稍后失败。
• 您必须手动取消设置新选项。

这里需要考虑的重要因素是这两个选项的用户体验。发出同步请求时，浏览器停止中继事件的情况并不罕见，这会产生 UI 已锁定且页面无响应的错觉。这样做的好处是可以确保在不允许的情况下该值永远不会显示。但是，如果用户通常可以添加元素，那么它也有使最常见用例复杂化的缺点。

如果用户通常可以添加元素，那么在发出请求时添加元素，然后在出现问题时通知用户（在删除元素时）会是更好的体验。这在 Web 应用程序中非常常见，您可以在很多地方看到它的使用，例如 Twitter 和 Facebook 之类的按钮（请求通常在其中起作用），以及 Stack Overflow 上的地方。