Python Flask前後端Ajaxインタラクション

5618 ワード

前にflaskの基礎知識をまとめましたが、今flaskの前後のデータのインタラクションの知識をまとめてみましょう.ここではAjaxを使っています.
一、post方法
1、postメソッドの位置:フロントエンドHTMLで、 のクリック関数にバインドされているか、マウス入力ボックスでクリックしてイベントを離れている.(1)URLにデータを添付し(リクエストパス)、バックエンドに送信する.
/*  HTML :*/
$.post("/js_post/"+ip, data_to_backend, function(data){alert("success "+data)} );
</code></pre> 
 <blockquote> 
  <p>  <code>ip</code>,<code>data_to_backend</code>          ;<code>data_to_backend</code>     <code>json</code>  (<code>data_to_backend={'ip':$(this).parent().prev().text()}</code>), <code>data</code>          。</p> 
 </blockquote> 
 <pre><code>#  py  (       html py  ) :          post  
@app.route("/js_post/<ip>", methods=['GET', 'POST'])
def js_post(ip):
      print ip
      return ip +" - ip"
</code></pre> 
 <p>        :</p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 460px; max-height: 183px;"> 
   <div class="image-view"> 
    <a href="https://img.  .com/image/info10/1dab8d77b8904300845df6690ae74dd8.png" target="_blank"><img src="https://img.  .com/image/info10/1dab8d77b8904300845df6690ae74dd8.png" width="460" height="183" alt="Python Flask   Ajax  _ 1   " style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
             
  </div> 
 </div> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 335px; max-height: 22px;"> 
   <div class="image-view"> 
    <img src="https://img.  .com/image/info10/9ad249e45fdd4a3da068af488bf8ea96.png" width="335" height="22"> 
   </div> 
  </div> 
  <div class="image-caption">
    ip URL  
  </div> 
 </div> 
 <p>(2)         </p> 
 <pre><code>var ip = $(this).parent().prev().prev().prev().prev().text();
data_tmp = {'ip':ip, 'text':"success for ajax"};    // data to send to server.
$.post('/js_call', data_tmp, function(data){alert(data)});
</code></pre> 
 <p>      :</p> 
 <pre><code>@app.route('/js_call', methods=['GET', 'POST'])
def js_call():   
      print request.values['ip']    
      print request.values['text']    
      # to send the command by ssh : os.system("ssh user@host \' restart(command) \' ")    
      return 'ok!!!!'
</code></pre> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 494px; max-height: 102px;"> 
   <div class="image-view"> 
    <a href="https://img.  .com/image/info10/5df8879b469a4636a03c8b0bdb4f09da.png" target="_blank"><img src="https://img.  .com/image/info10/5df8879b469a4636a03c8b0bdb4f09da.png" width="494" height="102" alt="Python Flask   Ajax  _ 2   " style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
    post       
  </div> 
 </div> 
 <h5> 、get  (       )</h5> 
 <pre><code>$.get('/js_get', {'method':'GET',  'text':"from-html"}, function(data){alert(data)})
</code></pre> 
 <p>        :</p> 
 <pre><code>@app.route('/js_get', methods=['GET'])
def js_get():
    print "method: "+request.values['method']+" --- text: "+request.values['text']
    return "get success!"
</code></pre> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 463px; max-height: 142px;"> 
   <div class="image-view"> 
    <a href="https://img.  .com/image/info10/991bc1e8c7b74ad691aff9854c686508.jpg" target="_blank"><img src="https://img.  .com/image/info10/991bc1e8c7b74ad691aff9854c686508.jpg" width="463" height="142" alt="Python Flask   Ajax  _ 3   " style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
    get   
  </div> 
 </div> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 136px;"> 
   <div class="image-view"> 
    <a href="https://img.  .com/image/info10/b4ec344534664e2b9ebfba28772a1fd0.png" target="_blank"><img src="https://img.  .com/image/info10/b4ec344534664e2b9ebfba28772a1fd0.png" width="714" height="136" alt="Python Flask   Ajax  _ 4   " style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
           
  </div> 
 </div> 
 <blockquote> 
  <p>    :    py     <code>request.values['method']</code>      <code>request</code>   Python flask   ,    。</p> 
 </blockquote> 
 <h4>  :</h4> 
 <ol> 
  <li> flask   ,Ajax             ,     Python    ajax        。</li> 
 </ol> 
 <ul> 
  <li>Ajax <code>post</code>, <code>get</code>            ,     <code>post</code>   (    ),<code>get</code>    (   )。</li> 
 </ul> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1180094910481616896"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">