DjangoBB LoFi version

Начало » Python для новичков » Передать JSON в JQuery

Alex_3000

Апрель 26, 2018 19:08:30

У меня такой вопрос. Есть сайт на Flask.
Делаю выборку из БД из двух таблиц.
Эта выборка отображается на странице в виде списка.
Отображается только первый столбец(из первой таблицы)
Далее надо выбрать из списка значение и в зависимости от выбранного значения, в
другом окошке должно отобразиться соответствующее значение из второго столбца.

Первая таблица: TableA (id, X) , Вторая таблица: TableB(id, Y)

Собственно код на выборку и переход на страницу html
view.py

 @app3.route('/page1',methods=['GET','POST'])
def page1():
    
    res = db.session.query(TableA,TableB).join(TableA, TableA.id == TableB.id)
    res = res.all()
   #Далее этот результат надо преобразовать в JSON и передать в html.
   #Пока с этим не разобрался. Т.к. там надо какие-то функции при описании и таблиц прописывать.
   
   #Допустим при помощи перебора сделал словарь:
 
  d = [{'X':'10,'Y':red},{'X':'20,'Y':blue},{'X':'30,'Y':green}] 
  #далее
  resD = dumps(d)
      
   #И передаю переменную
   return render_template('page1.html', res=res, resD=resD)

————–

page1.html

 <div id="intro" class="input-container">
    <table>
        <tr>
            <td>
                 <select id = code name="code">
                {% for p in res %}
                 <option value="{{p[0].X}}">{{p[0].X}}</option>
                 {% endfor %}
                </select>
            </td>
        </tr>
    </table>
    </div>
<p id=out>Суда надо Подставить значение из второй таблицы</p>
<!--
Здесь использую jQuery как отдельный файл.
Передаю JSON объект resD в скрипт.
!-->
<script id="script1" data-pass_data={{resD}} type=text/javascript src="{{url_for('app3.static', filename='js/main.js') }}"></script>

———–

И сам скрипт:

main.jsp

 Здесь  выбираю эту переданную переменную для дальнейшей обработки
r = $(script1).data("pass_data");
А дальше затык. Не понимаю как ее распарсить на части.
Делаю так
points = $.JSON.parse(r|safe)
Но это не работает. Можете подсказать как это правильно разбить на части
$( "select#code" )
  .change(function () {
    var str = "";
    var ind = 0;
    $( "select option:selected" ).each(function() {
      x  = $( this ).text() ;
      ind = $(this).index();
    });
    Это подстановка в из второго столбца
   $("#out").text(points[ind].Y)
  }).change();

py.user.next

Апрель 27, 2018 04:01:23

Ты уверен, что правильно вывел JSON-данные в сам атрибут с префиксом data- ?

Alex_3000

Апрель 27, 2018 12:05:51

Теперь не уверен.
Если пытаюсь эту переменную отобразить сразу.

 r = $(script1).data("pass_data");
$("#out").text(r)

То она не полностью отображается, только
[{'X':
Странно. Я думал, что dumps(d) достаточно.

py.user.next

Апрель 27, 2018 12:25:57

Alex_3000
Странно. Я думал, что dumps(d) достаточно.

Достаточно. Просто ты заглушку для словаря из данных сделал неправильно и передал её в dumps().
Ещё не факт, что правильный результат dumps() можно напрямую разместить в атрибуте тега. Может потребоваться экранирование в контексте html-кода. Так что ты сначала руками всё это проделай, проставь данные напрямую и посмотри, работает ли так. Потом уже автоматизируй то, что проделал вручную.

Alex_3000

Апрель 27, 2018 16:29:35

Всмысле не правильно?
Имеется ввиду опечатка?
Словарь такой :

   d = [{'X':10,'Y':'red'},{'X':20,'Y':'blue'},{'X':30,'Y':'green'}]

Но все равно не работает.
Или он должен быть совсем в другом формате?

py.user.next

Апрель 27, 2018 16:46:43

Alex_3000
Но все равно не работает.

Вручную запиши данные в атрибут тега и проверь. Когда получишь правильную строку, тогда и будешь её делать автоматически.
Можешь не заморачиваться с экранированием, а закодировать строку с JSON-данными в base64 и хранить эту последовательность в атрибуте. А при взятии раскодировать из base64 и она уже раскодируется без потерь.

Alex_3000

Апрель 28, 2018 11:47:18

Сделал так
view.py

 #В этом методе и передается словарь.
#Через метод POST
#Но как понял можно и список
@app3.route("/data", methods = ['POST'])
def data():
    list = [{'X':1,'Y':'RED'},{'X':2,'Y':'YELLOW'},{'X':3,'Y':'GREEN'},{'X':5,'Y':'WHITE'}]
    # array - название Json- объекта
    return jsonify(array=list)
#Доступ к самой Странице
@app3.route("/page1")
def page1():
     return render_template('page1.html')

page1.html

 <p id = "out">Результат</p>
 <script id="script1" type=text/javascript src="{{url_for('color.static', filename='js/main.js') }}"></script>

И скрипт main.jsp

 //Считывание json- переменной
$(document).ready(function() {
    var request = $.ajax({
        type: "POST",
        url: "/color/data",  //путь к def data()
        data: {"name":""}, 
        dataType: "html"
    });
   // Парсинг json-переменной
    request.done(function(JSON_array) {
        array_data = JSON.parse(JSON_array)["array"]
        
        // Вывод данных
        $("#out").text(array_data[1].X)
    });
});