無法從 Flask 到 Javascript AJAX ZC1C425268E68385D14AB5074C17A 返回多個變量

Question

我有一個 JS function 正在根據先前的輸入更新后續的 select 框。 我用來自查詢數據庫的 Flask function 的響應填充這些。 問題是無法正確處理包含數組的第二個變量。 第一個 function 工作正常，但第二個只有一個未定義的變量。

JS Function

function update(deptcity, destsets, datesets, dtimesets) {

        $.ajax({
          
          url:"/returncity/?q="+deptcity, //the page containing python script
          type: "POST", //request type,
          dataType: 'json',
          data: JSON.stringify(deptcity)
        })

        .then( function updateDest(destsets, datesets) {
          
          console.log(datesets)
          var dest = destsets.destsets;
            
          var select = document.getElementById("destination");
          var length = select.options.length;

          for (i = length-1; i >= 0; i--) {
            select.options[i] = null;
          }

          var len = dest.length;
          for (i = len - 1; i >= 0; i--) {
            document.getElementById("destination").add(new Option(dest[i]));
          }

          

        })
          
        .then( function updateDate(datesets) {

          console.log(datesets);
          var date = datesets;

          var select = document.getElementById("date");
          var length = select.options.length;

          for (i = length - 1; i >= 0; i--) {
            select.options[i] = null;
          }

          var len = date.length;
          for (i = len - 1; i >= 0; i--) {
            document.getElementById("date").add(new Option(date[i]));
          }
        })
          
        ;

      }

Flask Function

@views.route('/returncity/', methods = ['POST', 'GET'])
@login_required
def ajax_returncity():
    if request.method == 'POST':

        q = [request.get_json('data')]
        

        query = '''SELECT DISTINCT destination FROM Journey WHERE depart = ? ORDER BY destination ASC'''
        con = sqlite3.connect('Coach\database.db')
        cur = con.cursor()
        cur.execute(query, q)
        destrows = cur.fetchall()

        query = '''SELECT DISTINCT date FROM Journey WHERE depart = ? ORDER BY date ASC'''
        con = sqlite3.connect('Coach\database.db')
        cur = con.cursor()
        cur.execute(query, q)
        daterows = cur.fetchall()

        query = '''SELECT DISTINCT dtime FROM Journey WHERE depart = ? ORDER BY dtime ASC'''
        con = sqlite3.connect('Coach\database.db')
        cur = con.cursor()
        cur.execute(query, q)
        dtimerows = cur.fetchall()

        cur.close()
        con.close()

        destrow = []
        for i in destrows:
            for x in i:
                destrow.append(str(x))

        daterow = []
        for i in daterows:
            for x in i:
                daterow.append(str(x))
        print(daterow)
        
        dtimerow = []
        for i in dtimerows:
            for x in i:
                dtimerow.append(str(x))

        return jsonify(destsets = destrow, datesets = daterow, dtimesets = dtimerow)

我嘗試通過第一個 function 傳遞變量，看看它是否會被接受，但它沒有。 第一個 function 將其設置為字符串“成功”。 第二個 function 返回“未定義”。

提前感謝您的幫助。

Answer 1

The answer is to create a JSON object within the flask function and return it as one varibale as well as only using one JS function. 我不確定它背后的原因，因為我想我不太了解 JSON 和 AJAX 等。 Flask

all_data = {'dest':destrow,'date':daterow, 'dtime':dtimerow}

return jsonify(all_data)

js

function update(deptcity, data) {

    $.ajax({
      
      url:"/returncity/?q="+deptcity, //the page containing python script
      type: "POST", //request type,
      dataType: 'json',
      data: JSON.stringify(deptcity)
    })

    .then( function updateDest(data) {
      
      
      var dest = data.dest;
      console.log(dest);
        
      var select = document.getElementById("destination");
      var length = select.options.length;

      for (i = length-1; i >= 0; i--) {
        select.options[i] = null;
      }

      var len = dest.length;
      for (i = len - 1; i >= 0; i--) {
        document.getElementById("destination").add(new Option(dest[i]));
      }

      console.log(data.date);
      var date = data.date;

      var select = document.getElementById("date");
      var length = select.options.length;

      for (i = length - 1; i >= 0; i--) {
        select.options[i] = null;
      }

      var len = date.length;
      for (i = len - 1; i >= 0; i--) {
        document.getElementById("date").add(new Option(date[i]));
      }

      console.log(data.dtime);
      var dtime = data.dtime;

      var select = document.getElementById("dtime");
      var length = select.options.length;

      for (i = length - 1; i >= 0; i--) {
        select.options[i] = null;
      }

      var len = dtime.length;
      for (i = len - 1; i >= 0; i--) {
        document.getElementById("dtime").add(new Option(dtime[i]));
      }

    })
      
      
    ;

  }

Answer 2

您應該只需要一個連接和一個 cursor：

@views.route('/returncity/', methods = ['POST', 'GET'])
@login_required
def ajax_returncity():
    if request.method == 'POST':
        q = [request.get_json('data')]
        connection = sqlite3.connect('Coach/database.db')
        cursor = connection.cursor()
        
        query = '''SELECT DISTINCT destination FROM Journey WHERE depart = ? ORDER BY destination ASC'''
        cursor.execute(query, q)
        destrows = [dest for dest, in cursor]

        query = '''SELECT DISTINCT date FROM Journey WHERE depart = ? ORDER BY date ASC'''
        cursor.execute(query, q)
        daterows = [date for date, in cursor]

        query = '''SELECT DISTINCT dtime FROM Journey WHERE depart = ? ORDER BY dtime ASC'''
        cursor.execute(query, q)
        dtimerows = [dtime for dtime, in cursor]

        cursor.close()
        connection.close()

        return jsonify(destsets=destrows, datesets=daterows, dtimesets=dtimerows)

而且你只能有一個function，它可以得到所有的數據：

function update(deptcity, destsets, datesets, dtimesets) {
    $.ajax({
      url:"/returncity/?q="+deptcity, //the page containing python script
      type: "POST", //request type
      dataType: 'json',
      data: JSON.stringify(deptcity)
    })
    .then( function updateDest(data) {
      console.log(data)
      var select;
      select = document.getElementById("destination");
      for (i = select.options.length - 1; i >= 0; i--) {
        select.options[i] = null;
      }
      var dest = data.destsets;
      for (i = dest.length - 1; i >= 0; i--) {
        select.add(new Option(dest[i]));
      }

      select = document.getElementById("date");
      for (i = select.options.length - 1; i >= 0; i--) {
        select.options[i] = null;
      }

      var date = data.datesets;
      for (i = date.length - 1; i >= 0; i--) {
        select.add(new Option(date[i]));
      }
    });
  }