Javascript << Previous Next >> Ggame

Brython

繪圖範例

Geometric Constraint Solver

https://www.mattkeeter.com/projects/constraints/

Ajax 範例

伺服器端使用 Flask

from flask import Flask, render_template, request, jsonify

# Initialize the Flask application
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/add_numbers', methods=['POST'])
def add_numbers():
    a = request.form.get('a', 0, type=int)
    b = request.form.get('b', 0, type=int)
    #return jsonify(result = a+b)
    # 必須傳回字串?
    return str(a+b)

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

客戶端使用 Brython

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://brython.info/src/brython_dist.js"></script>
  </head>
  <body onload="brython()">
  <script type="text/python">
    from browser import document
    from browser import ajax
    # https://www.brython.info/static_doc/en/ajax.html
    
    def on_complete(req):
        document["txt_area"] .clear()
        if req.status==200 or req.status==0:
            document["txt_area"] <= req.text
        else:
            document["txt_area"] <= "error "+req.text
            
    def get(url):  
        # req 從 ajax 模組中的 ajax 類別建立案例, 為一個 ajax 物件        
        req = ajax.ajax()
        # a 為 id="A" 輸入欄位中所輸入的值
        a = document['A'].value
        # b 為 id="B" 輸入欄位中所輸入的值        
        b = document['B'].value
        # ajax 物件中的 bind 方法, 第一個輸入變數為 evt, 'complete' 表示 ajax 從伺服器取值完成後, 執行 on_complete 函式
        req.bind('complete', on_complete)
        req.open('POST', url, True)
        req.set_header('content-type','application/x-www-form-urlencoded')
        req.send({"a": a, "b":b}) 
    
    # 使用者按下 id="calculate" 按鈕, 將會執行上述 get("/add_numbers") 函式
    document['calculate'].bind('click',lambda ev:get('/add_numbers'))

</script>
  
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Brython ajax example</h3>
      </div>
      <div>
    <input type="text" id="A" size="5" name="a"> +
    <input type="text" id ="B" size="5" name="b"> =
    <div id="txt_area"></div>
    <p><button id="calculate">calculate server side</button>
      </form>
      </div>
    </div>
  </body>
</html>

參考資料:

https://stackoverflow.com/questions/41957490/send-canvas-image-data-uint8clampedarray-to-flask-server-via-ajax

Konva js

https://code.tutsplus.com/series/manipulating-html5-canvas-using-konva--cms-1242

Javascript << Previous Next >> Ggame

Brython

Documentation

有關 Javascript 中的 this 導入

Demo

Gallery

vue.py

brySVG

More Examples

繪圖範例

Geometric Constraint Solver

Ajax 範例

參考資料:

Konva js