Python Flask前後端Ajaxインタラクション
5618 ワード
前にflaskの基礎知識をまとめましたが、今flaskの前後のデータのインタラクションの知識をまとめてみましょう.ここではAjaxを使っています.
一、post方法
1、postメソッドの位置:フロントエンドHTMLで、
一、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">