Моя реализация AJAX для поиска в inventory

Реализация AJAX для поиска в инвентори. Общая схема

  1. После ввода поискового запроса, нажатия bottom, нажатия на enter срабатывает соответствующий обработчик js: click(), submit(), keypress().
  2. Используя AJAX, GET запрос, передается на сервер, в обработчик django url
  3. url отправляет его во view: search()
  4. Выполняет запрос в БД, формирует Query Set, возвращает словарь в шаблон
  5. В шаблоне разбираем словарь на составляющие, для отрисовки страницы

 

  1. Форма поискового запроса, на нее попадаем после перехода по ссылке inventory
/net/inventory/templates/inventory/inventory.html
{% extends 'inventory/base.html' %}
{% block content %}
    <div class="container">
		<div class="row " style="padding-top: 20px"> 
          <div class="col-md-2"></div>
          <div class="col-md-8 ">
               <form action="." method="GET" id="search_form">
                <div class="input-group" >
                  <input type="text" class="form-control" placeholder="Search for..." name="q" />
				  <span class="input-group-btn">
                    <button class="btn btn-success glyphicon glyphicon-globe" type="button" id="click_search_btn" ></button>
                  </span>
                </div><!-- /input-group -->
               
				</form>
          </div>
          <div class="col-md-2">
			<a class="btn btn-success" type="button" id="add_node">Добавить устройство</a>
		  </div>

		</div>
			<div class="row">
				<div class="col-md-2"></div>
					<div class="col-md-8">
						<div id="result_search"></div>
					</div>
				<div class="col-md-2"></div>
			</div>
    </div>
{% endblock %}

2. Используя AJAX, GET запрос, передается на сервер, в обработчик django urls

/net/inventory/static/inventory/inventory.js
$( document ).ready(function() {
	//Обработчик для клика по кнопке
	 $("#search_form").click(function(event){
       var form_data = $("#search_form").serialize(); //Формируем массив
		console.log( form_data );
            $.ajax({
                 type:"GET",
                 url:"search/",
                 data: form_data ,
                 success: function(data){
                     $('#result_search').html(data) 
                    }
            });
       });
      //Обработчик для клика по Enter
	 $("#search_form").submit(function(event){
       var form_data = $("#search_form").serialize(); //Формируем массив
		console.log( form_data );
            $.ajax({
                 type:"GET",
                 url:"search/",
                 data: form_data ,
                 success: function(data){
                     $('#result_search').html(data) 
                    }
            });
            return false; //Отключаем перезагрузку страницы при отправке формы
       });
     //Обработчик для отправки во время набора текста
	 $("#search_form").keypress(function(event){
       var form_data = $("#search_form").serialize(); //Формируем массив
		console.log( form_data );
            $.ajax({
                 type:"GET",
                 url:"search/",
                 data: form_data ,
                 success: function(data){
                     $('#result_search').html(data) 
                    }
            });
       });

});

3.urls отправляет его во view. search()

/net/inventory/urls/py
# -*- coding: utf-8 -*-

from django.conf.urls import url, include
from django.contrib import admin
from inventory import views

# Must be list [], but not dict {}!
urlpatterns = [
    url(r'^inventory/search/$', views.search, name="search"),# Ссылка на страницу с inventory
]

4.Выполняет запрос в БД, формирует Query Set, возвращает словарь в шаблон

/net/inventory/views.py
# Импортируем модель
from inventory.models import Nodes

# Использую для логического OR в ORM, при построении Query Set
from django.db.models import Q


# AJAX для inventory
def search(request):
	if request.method == "GET":
		# Получаем GET-запрос от AJAX обработчика формы
		srch_ask = request.GET['q']
		# __icontain  - регистронезависимоя проверка на вхождение, для полнотекстового поиска по нужным столбцам в БД
		result = Nodes.objects.all().filter(Q(hostname__icontains=""+srch_ask+"") | Q(ip__icontains=""+srch_ask+"") | Q(region__icontains=""+srch_ask+"") | Q(sity__icontains=""+srch_ask+"") | Q(description__icontains=""+srch_ask+""))
		# Возвращаем словарь в шаблон, для рендеринга страницы
		return render(request, 'inventory/search_result.html', {'result': result})

5.В шаблоне разбираем словарь на составляющие, для отрисовки страницы

/net/inventory/templates/inventory/search_result.html
<table class="table table-bordered" style="margin-top: 20px">
<tr>
	<th>ip</th>
	<th>Hostname</th>
	<th>Region</th>
	<th>Sity</th>
	<th>Site</th>
	<th>Description</th>
</tr>
{% for node in result %}
    <tr>
		<td>{{ node.ip }}</td>
		<td>{{ node.hostname }}</td>
		<td>{{ node.region }}</td>
		<td>{{ node.sity }}</td>
		<td>{{ node.site }}</td>
		<td class="inventory_description">{{ node.description }}</td>
	</tr>
{% endfor %}
</table>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *