Ajaxとjinjaを使用してPOSTリクエスト後にテンプレートをレンダリングする方法

Question

Flask、Bootstrap、およびデバイス（携帯電話）の詳細を保持するjinja2でアプリケーションを構築しています。

メインページは、各行がデバイスを表すテーブルです。デバイスごとに、レポートページへのリンクを含む「レポート」列があります。

現在、私はhome.js私のフラスコサーバー上の今

$('.report').click(function() { 
    console.log("report clicked"); 
    $.ajax({ 
     url: '/showDeviceReports', 
     type: 'POST', 
     data:{'attack':attack}, 
     success: function(response){ 
      console.log(response.data); 
      document.write(response.data); 
     }, 
     error: function(error){ 
      console.log(error); 
     } 
    }); 
}); 

から次の要求を持って、私は

@routes.route('/showDeviceReports', methods=['POST','GET']) 
def showDeviceReports(): 
    attack = request.values.get('attack', None) 
    print attack 
    if attack: 
     collection = mongo.db[attack] 

     res = collection.find_one({"_id": "dd:dd:ff:dd:gg:44"}) 
     if res: 
      res = collection.find_one({"_id": "dd:dd:ff:dd:gg:44", "reports._id": "10.0.1"}) 
      if res: 
       # update array object 
       collection.update_one({"_id": "dd:dd:ff:dd:gg:44","reports._id":"10.0.1"}, 
          {'$set':{"reports.0":reports_dict[attack]}}) 
      else: 
       #add new element to report array 
       collection.update_one({"_id": "dd:dd:ff:dd:gg:44"}, 
            {'$push':{"reports":reports_dict[attack]}}) 
      pass 
     else: 
      # myreports = collection.find_one_and_replace({"_id": "dd:dd:ff:dd:gg:22"}, gold_apple_report, upsert=True) 
      schema = {"_id": "dd:dd:ff:dd:gg:44", 
          "name":"iphone", 
          "account":"test@gmail.com", 
          "updated_on":str(datetime.strftime(datetime.now(), '%Y-%m-%d')), 
          "reports": [reports_dict[attack]]} 
      collection.insert_one(schema) 
     # myreports = collection.find_one_and_replace({"_id":"dd:dd:ff:dd:gg:22"}, res,upsert=True) 
     # print myreports.inserted_id 
     res = collection.find_one({"_id": "dd:dd:ff:dd:gg:44"}) 
    else: 
     res = {} 
    return render_template('reports.html', meta=res) 

のroutes.pyリクエストを処理していますし、私はロードしたいと思いますreports.htmlページ 私はページに渡したデータをmetaに含めます。

これはreports.htmlです：

<div class="tree well"> 
      <ul> 
       <li> 
        <span><i class="fa fa-tablet"></i> {{meta["name"]}}</span> 

        <ul> 
         {% for v in meta["reports"] %} 
         <li> 
          <span><i class="fa fa-code-fork"></i> {{v["_id"]}} </span> 
          <ul> 
           <li> 
            <span><i class="fa fa-calendar-o "></i> {{meta["updated_on"]}} </span> 
           </li> 
           <li > 
            <span ><i class="fa fa-sitemap"></i> Attack flow </span> 

            <ul > 
             {% for proc in v["attackProccess"].keys() %} 
             <li > 
              <span ><i class="fa fa-minus-circle"></i> {{proc}} </span> 

              <ul id="ul-attack-items"> 
               <li> 
                <span class="status" id="{{proc}}">{{v["attackProccess"][proc]["status"]}}</span> 
               </li> 
               <li> 
                <span class="fa fa-bug status"> issues</span> 
               </li> 
              </ul> 

             </li> 
             {% endfor %} 
            </ul> 

           </li> 
           <li > 
            <span > <i class="fa fa-database"></i> Data </span> 

            <ul > 
             {% for item in v["data"].keys() %} 
             <li > 
              <span ><i class="fa fa-minus-circle"></i> {{item}} </span> 
              {% if item == 'chats' %} 
              <ul> 
               {% for chat in v["data"][item] %} 
               <li> 
                <span ><i class="fa fa-comments"></i> {{chat}} </span> 
                <ul id="ul-chat-items"> 
                 <li> 
                  <span class="status" id="{{chat}}" >{{v["data"][item][chat]["status"]}}</span> 
                 </li> 
                 <li> 
                  <span class="fa fa-bug status"> issues</span> 
                 </li> 
                </ul> 
               </li> 
               {% endfor %} 
              </ul> 
              {% else %} 
              <ul id="ul-data-items"> 
               <li> 
                <span class="status" id="{{item}}" >{{v["data"][item]["status"]}} </span> 
               </li> 
               <li> 
                <span class="fa fa-bug status"> issues</span> 
               </li> 
              </ul> 
              {% endif %} 

             </li> 
             {% endfor %} 
            </ul> 

           </li> 

          </ul> 

         </li> 
         {% endfor %} 
        </ul> 

       </li> 
      </ul> 
     </div> 

が、私はAJAXリクエストを経由して、それを処理する必要があります問題。 jqueryとjinjaを統合する方法がいくつかありますか？

Answer 1

は「GETやPOSTでAJAX呼び出しを持つ最初の要求を行い、要求の種類を識別した後、別のロジックを実行する」Priyank Mehtaに

おかげで私はそれ使用したソリューションである解決しました。