Использование HTTP POST с typeahead js и Bloodhound js

По умолчанию Bloodhound.js будет запрашивать через HTTP GET, но это делает вас уязвимым для перехват JSON. Поскольку у меня есть конфиденциальная информация, которую я хочу загрузить в typehead, HTTP GET делает меня уязвимым. Раньше была возможность выбрать сообщение (как показано здесь: typeahead.js remote перед отправкой проблемы с почтовыми данными), но это не работает с последней версией (v.0.11.1).


javascript typeahead.js bloodhound
person viggity    schedule 15.10.2015    source источник
comment
stackoverflow.com/a/46927923/3966458 без ajax   -  person Saahithyan Vigneswaran    schedule 25.10.2017

Ответы (2)


arrow_upward
17
arrow_downward

Мне потребовалось много душевной боли и экспериментов, чтобы получить это. В последней версии (v.0.11.1) есть опция функции transport, вы можете использовать ее для делегирования чего угодно (веб-сокеты или старый добрый $.ajax с сообщением).

var accountBloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: {
        url: '/account/search#%QUERY',
        wildcard: '%QUERY',
        transport: function (opts, onSuccess, onError) {
            var url = opts.url.split("#")[0];
            var query = opts.url.split("#")[1];
            $.ajax({
                url: url,
                data: "search=" + query,
                type: "POST",
                success: onSuccess,
                error: onError,
            })
        }
    }
});

$('#remote .typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: accountBloodhound 
}).bind('typeahead:select', function (ev, suggestion) {
    console.log('Selection: ' + suggestion);
});
person viggity    schedule 15.10.2015
comment
твоя душевная боль окупилась ;) - person Niket Pathak; 18.12.2017
comment
В вашем примере транспорт принимает следующее (opts, onSuccess, onErro), где они инициализируются. Я изо всех сил пытаюсь понять, как onSuccess привязывается к источнику. - person inlokesh; 23.04.2019
comment
@inlokesh — opts — это объект, который создается с помощью typeahead и передается вашей транспортной функции. Вы можете установить точку останова/команду отладчика в транспортной функции. onSuccess и onError — это просто функции обратного вызова, которые нужно использовать/вызывать, когда метод выполняется успешно или с ошибкой. Вы можете видеть, что я просто передаю их оптом моему вызову jquery ajax, но вы можете вызвать их, если хотите. - person viggity; 25.04.2019
comment
Спасибо за этого спасателя! - person user2297026; 17.07.2020

arrow_upward
3
arrow_downward

Эта ссылка поможет

var searchAuto = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('word'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: base_url + 'ajax/get_words',
        prepare: function (q, rq) {

            $(".typeahead-loader").show();

            rq.data = {
                q: $("#SearchData").val(),
                // source: 'S01',
                searchtype: $("#Searchtype").val(),
                language: $("#language").val(),
                author: $("#author").val(),
                raag: $("#raag").val(),
                page_from: $("#page_from").val(),
                page_to: $("#page_to").val()
            };
            return rq;
        },
        transport: function (obj, onS, onE) {

            $.ajax(obj).done(done).fail(fail).always(always);

            function done(data, textStatus, request) {
                // Don't forget to fire the callback for Bloodhound
                onS(data);
            }

            function fail(request, textStatus, errorThrown) {
                // Don't forget the error callback for Bloodhound
                onE(errorThrown);
            }

            function always() {
                $(".typeahead-loader").hide();
            }
        }
    }
});

если вы console.log объект, то есть первый параметр, вы получите

введите здесь описание изображения

и вы можете легко переопределить type в obj

obj.type = 'POST'

Надеюсь это поможет...

person Suraj Gupta    schedule 24.02.2017