Не могу получить ответ от python скрипта и на его основе создать список (зависимые списки js ajax python)

@makkson · Регистрация: 12.12.2014

Студворк — интернет-сервис помощи студентам

Привет!
Есть необходимость сделать динамические списки при помощи js, ajax jQuery, Python.
Данные в скрипт передал, сделал выборку по базе, по вот как вернуть ответ и как по нему заполнить поле выбора города на основании региона не могу понять.
Вот код страницы с дивами из которых беру данные и в который пытаюсь подгрузить города:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Отправить комментарий</title>
        <link href='../css/style.css' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
    
        <form name="comm_send" action="../cgi-bin/form.py" class="comm_send" onsubmit="return ValForm()">
    
            <div class='form'>
                <label for='region'>Регион: </label>
                <select size="1"  id='region' name="region" onchange="selectRegion(this.value)">
                    <option value=""></option>
                    <option value="1">Краснодарский край</option>
                    <option value="2">Ростовская область</option>
                    <option value="3">Ставропольский край</option>    
                </select>
            </div>
    
            <div class='form'>
                <div>Населённый пункт:<select id="city" name="selectDataRegion" value=""></select></div>
            </div>
    
            <div class="form">
                <input type="submit" value='Отправить'>
            </div>
    
        </form>
    
        <script type="text/javascript" src="../script/jquery.js"></script>
        <script type="text/javascript" src="../script/script.js"></script>
        <script type="text/javascript">
    
            function selectRegion(){
                    var id_region = $('select[name="region"]').val();
                    if(!id_region){
                            $('div[name="selectDataRegion"]').html('');
                    }else{
                            $.ajax({
                                    type: "GET",
                                    url: "../cgi-bin/select_city.py",
                                    data: {'id_region': id_region},
                                    success: function(city) {
                                        var cities = city;
                                        var text = "<option value=''>Выберите город</option>";
                                        document.comm_send.city.innerHTML = cities;
                                        
                                    }
                            });
                    };
            };
        </script>
    
    </body>
    
    </html>

И вот код скрипта на python:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    #!/usr/bin/env python3
    
    import cgi
    import sqlite3
    
    conn = sqlite3.connect("comm.db")
    cursor = conn.cursor()
    
    receive = cgi.FieldStorage()
    id_region = int(receive.getvalue("id_region"))
    
    cursor.execute("SELECT city FROM cities WHERE region_id=?", (id_region,))
    data = cursor.fetchall()
    
    print(data)

Подскажите, пожалуйста, что я не так сделал. Заранее спасибо!

Рыжий Лис · 19.03.2018, 06:01

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
    type: "GET",
    url: "../cgi-bin/select_city.py",
    data: {'id_region': id_region},
    dataType: "json",
    success: function(ls) {
        var html = '';
        $.each(ls, function (i, d){
            html += '<option value="' + d.id + '">' + d.value + '</option>';
        });
        document.comm_send.city.innerHTML = html;
    }
});

Python
1
2
3
4
5
from json import JSONEncoder
#...
cursor.execute("SELECT id, city as value FROM cities WHERE region_id=?", (id_region,))
data = cursor.fetchall()
print(JSONEncoder.encode(data))

@makkson · 19.03.2018, 10:38 **[ТС]**

Рыжий Лис,
js код вставил без изменений
python поправил, ide ругался на отсутствие скобочек в принте после JSONEncoder

Python
1
print(JSONEncoder().encode(data))

Но поля не подгружаются в форму все равно,ошибки никакие не вылетают, ни в python, ни в js
такое ощущение что ajax в ответ ничего не получает
ответ от python идет такой:

Python
1
[["\u0420\u043e\u0441\u0442\u043e\u0432"], ["\u0428\u0430\u0445\u0442\u044b"], ["\u0411\u0430\u0442\u0430\u0439\u0441\u043a"]]

Рыжий Лис · 19.03.2018, 11:26

Питон должен был возвращатить:

JSON
1
2
3
4
5
6
7
8
9
10
[
{
  id:1,
  value:"город1"
},
{
  id:2,
  value:"город2"
}
]

Может sql не подправили? В data должен лежать список со словарями.

@makkson · 19.03.2018, 11:29 **[ТС]**

Рыжий Лис,
да, верно, sql не поправил, сори
сейчас питон возвращает

Python
1
[[1, "\u041a\u0440\u0430\u0441\u043d\u043e\u0434\u0430\u0440"], [2, "\u041a\u0440\u043e\u043f\u043e\u0442\u043a\u0438\u043d"], [3, "\u0421\u043b\u0430\u0432\u044f\u043d\u0441\u043a"]]

Рыжий Лис · 19.03.2018, 11:33

Да, думаю, сойдёт. Добавь перед выводом данных заголовок:

Python
1
print('Content-Type: application/json\n\n')

И тогда в js:

JavaScript
1
2
3
        $.each(ls, function (i, d){
            html += '<option value="' + d[0] + '">' + d[1] + '</option>';
        });

@makkson · 19.03.2018, 11:37 **[ТС]**

вот отлично все, заработало
Огромное спасибо!
Итого код js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function selectRegion(){
                var id_region = $('select[name="region"]').val();
                if(!id_region){
                        $('div[name="selectDataRegion"]').html('');
                }
                else {
                    $.ajax({
                        type: "GET",
                        url: "../cgi-bin/select_city.py",
                        data: {'id_region': id_region},
                        dataType: "json",
                        success: function(ls) {
                            var html = '';
                            $.each(ls, function (i, d){
                                html += '<option value="' + d[0] + '">' + d[1] + '</option>';
                            });
                            document.comm_send.city.innerHTML = html;
                        }   
                    });
                };
        };

и код питон:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/usr/bin/env python3
 
import cgi
import sqlite3
from json import JSONEncoder
 
conn = sqlite3.connect("comm.db")
cursor = conn.cursor()
 
receive = cgi.FieldStorage()
id_region = receive.getvalue("id_region")
 
cursor.execute("SELECT id, city as value FROM cities WHERE region_id=?", (id_region,))
data = cursor.fetchall()
 
print('Content-Type: application/json\n\n')
print(JSONEncoder().encode(data))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Не могу получить ответ от python скрипта и на его основе создать список (зависимые списки js ajax python)

Решение

Решение

Решение