Django и AJAX - что я делаю не так? - PullRequest
Новая
       17

Django и AJAX - что я делаю не так?

2 голосов
/ 06 ноября 2011

Я пытаюсь написать простой поисковый сервер, используя Django с AJAX. Сам сервер работает нормально, но я все еще пытаюсь добавить автозаполнение в виджет поиска.

(я не хочу использовать доступные фрагменты Django, поскольку они не выполняют именно то, что я хочу, их сложно настроить, и они не учат меня основам, как это делает интерфейс с нуля)

На стороне клиента (Javascript) я использую YUI, потому что это выглядит проще - но не против переключения на jQuery, поэтому, пожалуйста, не зацикливайтесь на этом.

В YUI поле автозаполнения принимает три параметра: вход, контейнер и источник данных. Первые два - только виджеты, а третий интересен.

Если я напишу: 

var oDS = new YAHOO.util.LocalDataSource(["apples","apples2", "broccoli", "cherries"]);
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);

в моем <script> я получаю окно автозаполнения, которое автоматически заполняет эти условия.

Когда я пытаюсь заменить LocalDataSource на удаленный источник данных, например, выбрав var oDS = new YAHOO.util.ScriptNodeDataSource("127.0.0.1:8000/getNames/") и настроив подходящее представление, автозаполнение не происходит.

Что я знаю о проблеме:

  1. Я знаю, что представление вызывается (при отладочной печати) - так что это не проблема.
  2. Я возвращаю массив json jresponse = simplejson.dumps(response_array); return HttpResponse(jresponse, mimetype='application/javascript'); Я не думаю, что с этим есть какая-либо проблема, так как я могу получить прямой доступ к этому представлению и получить текстовое представление json, когда я это сделаю.
  3. Возможно, есть проблема с типом ввода, который ожидает локальный источник данных - я не знаю, как его установить.

Любая помощь (в том числе о том, как сделать это правильно в jQuery - я не против выбросить YUI), будет очень признательна.

Редактировать: После первых двух комментариев (спасибо!) Я установил firebug и начал играть с ним. Однако, это действительно грязно, поскольку на панели инструментов Yahoo много кода, и я не знаю, где его сломать. Есть ли какой-нибудь простой способ, чтобы firebug показывал мне только элементы json / xml?

@ Марат: я уже сделал это (обращаясь к своему представлению), и он возвращает строковое представление JSON (по крайней мере, это то, что показывает мой браузер). Это то, что я должен ожидать?

@ pastylegs: Вот код: 

 <div id="myAutoComplete">
    <input id="myInput" type="text">
    <div id="myContainer"></div>
    </br></br>
    <input type="submit">
</div>

 <script type="text/javascript">
YAHOO.example.BasicLocal = function() {
{%block oDS%}
// Use a LocalDataSource
var oDS = new YAHOO.util.LocalDataSource(["apples","apples2", "broccoli", cherries"]);
//for remote - oDS = new YAHOO.util.ScriptNodeDataSource("127.0.0.1:8000/getNames/")


// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
oAC.useShadow = true;

return {
    oDS: oDS,
    oAC: oAC
};
}();
</script>

Вид Джанго: 

def getNamesXML(request):
    response_array=['Apples','Oranges']
    print response_array
    jresponse = simplejson.dumps(response_array)
    print jresponse
    return HttpResponse(jresponse, mimetype='application/javascript')

Большое спасибо!

1 Ответ

1 голос
/ 07 ноября 2011

Я ничего не знаю о YUI, но могу привести рабочий пример jQuery.Основное отличие, которое я вижу в вашем коде, - это mimetype: как обсуждалось в , этот вопрос , вы должны использовать application/json.Тем не менее, я не думаю, что это будет иметь большое значение.

Для представления, используйте что-то вроде этого: 

def autosuggest(request):
    query = request.GET.get('term') # jQuery autosuggest input so far
    f = MyModel.objects.filter(name__icontains=query)
    response = [p[0] for p in f.order_by("name")[:10].values_list("name")]
    return HttpResponse(simplejson.dumps(response), mimetype="application/json")

Это предполагает, что f является QuerySet намодель с полем name, и вы хотите первые 10 совпадений.В вашем шаблоне должно выполняться следующее: 

$('#myInput').autocomplete({
    source: '{% url myapp.views.autosuggest %}',
    minLength: 2, // Two characters are needed before suggestions show
    select: function(event, ui) { // Callback function for selection
        $('#myInput').val(ui.item.value);
    },
});
...