تحديث البيانات تلقائيًا في قوالب فلاسك Flask بدون إعادة تحميل الصفحة

Mohssen A Mohssen · 22 يناير 2022

أحاول القيام بمربع للبحث في جوجل مع إمكانية عرض إقتراحات أثناء كتابة كلمة البحث، بطريقة مشابهة للتي يقوم بها جوجل كنوع من التدريب، وبدأت أستخدم Google Suggest Tool للقيام بهذه المهمة، لذلك قمت بكتابة كود JavaScript يقوم بإرسال طلب من نوع GET:

$("#search_input").keyup(function(){
var some_var = $(this).val();	// جلب النص الذي قام المستخدم بكتابته في مربع البحث
   $.ajax({
      url: "",
      type: "get",
      data:{jsdata: some_var},
      success: function(response) {
		console.log(response);
      },
      error: function(xhr) {
        alert('error');
      }
    });

بعد ذلك قمت بعمل مسار جديد في فلاسك Flask:

@app.route('/', methods=['GET', 'POST'])
def suggest_data():
    query = request.args.get('jsdata')

    if query == None:
        suggestions_list = ['',]
    else:
        suggestions_list = []
        
        # إستخراج الإقتراحاات من صفحة جوجل
        r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(query), 'lxml')
        soup = BeautifulSoup(r.content)
        suggestions = soup.find_all('suggestion')
        
        for suggestion in suggestions:
            suggestions_list.append(suggestion.attrs['data'])

    return render_template('start_page.html', suggestions_list=suggestions_list)

ثم قمت بعرض الإقتراحات في قالب بالشكل التالي:

<label id="suggestions">
    {% for suggestion in suggestions_list %}
        {{ suggestion }}
    {% endfor %}
</label>

لكن المتغير في قالب Jinja لا يتم تحديثه تلقائيًا ويطبع قائمة فارغة.

كيف أقوم بطباعة الاقتراحات من القائمة ديناميكيًا بتنسيق HTML؟

Mohamed Abu Abdo · 23 يناير 2022

يبدو الكود مكتمل بنسبة جيدة ولكن تحتاج إلى استيراد مكتبات أخرى في head أعني تحديداً jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

ولكن أيضا لماذا تريد ان يتم إعادة توجيهك إلى صفحة أخري هنا؟

return render_template('start_page.html')

لدي اقتراح آخر وهو استخدام صفحة واحدة فقط وإذا كان المستخدم يبحث فسيتم الرد ب json يحوي بداخله list المقترحات ,ويتم عرضها في جدول بسيط قابل للتحديث عند محاولة الكتابة في كل مرة وليس من خلال زر او Button,

إليكم المثال التالي:ونبدأ ب main.py :

#main.py
from flask import (Flask, render_template, request, jsonify)
from bs4 import BeautifulSoup
import requests


app = Flask(__name__, template_folder='template')

@app.route('/search', methods=['GET', 'POST']) #إستلام الطلبات من جيت وبوست
def suggest_data():
    if request.method == 'GET' and request.args.get('jsdata'): #إذا كان هناك داتا في الطلب نفذ ما بداخل الشرط
       query = request.args.get('jsdata')
       if query == None:
           suggestions_list = ['',]
       else:
           suggestions_list = []
           
           r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(query), 'lxml')
           soup = BeautifulSoup(r.content)
           suggestions = soup.find_all('suggestion')
           
           for suggestion in suggestions:
               suggestions_list.append(suggestion.attrs['data'])
       return jsonify(data=suggestions_list) #إعادة الداتا كجسون وليس صفحة ويب آخري
    else:
       #إن لم يتحقق الشرط سيتم إعادة صفحة ويب وهي صفحة البحث
       return render_template('start_page.html')

if __name__ == "__main__":
    app.run(debug = True)

في كل الأحوال عند الدخول إلي الصفحة من خلال المتصفح سوف يرسلنا إلى render_template('start_page.html') والسبب هو عدم وجود jsdata إلا في حال تم الارسال من ajax.

نأتي إلى صفحة start_page.html

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-->مهم إضافته</-->
  <title>Google Suggest Tool Flask</title>
</head>
<body>
   <h1>Search: Google Suggest Tool Flask</h1>
  
   <form action=""> <!--> من المهم إضاقة فورم لمستطيل البحث</-->
       <input id="search_input" type="text" name="typeing" placeholder="Country">
   </form>

   <h1>Result</h1>
   <table id="myTable"></table> <!-->إنشاء جدول لعرض البيانات أو المقترحات</-->
   
   <script>
        $("#search_input").keyup(function(){
          var some_var = $(this).val(); 
             $.ajax({
                    url: "/search", //رابط دالة البحث
                    type: "get",
                    data:{jsdata: some_var},
                    success: function(response) {
                       var res = response["data"]; //سحب المقترحات من الرد القادم من دالة البحث
                       var table = document.getElementById("myTable"); / تهيئةالجدول لعرض الداتا
                       //قبل العرض نقوم بحذف  محتوي الجدول من عملية البحث السابقة
                       while(table.rows.length > 0) {
                         table.deleteRow(0);
                       }
                       //لووب علي المقترحات 
                       for (var a=0; a < res.length; a++) {
                           //يتم إنشاء صف داخل الجدول لكل مقترح
                           table.innerHTML += "<tr>"+"<td>"+a+"</td>"+"<td>"+res[a]+"</td>"+"</tr>";
                       }
                    }
                    
              });
        });
   </script>
    
</body>
</html>