AJAXとFlaskで値を渡すと応答がありません

Question

AJAXとFlaskを初めて使用しました。私はhereに値を渡してページをリフレッシュせずに同じページに表示する方法を尋ねました。私はAjaxについて語りました。しかし、与えられた例を修正した後。私は奇妙なエラーが発生しています。ここで

は私のHTML側です：

<script type=text/javascript> 
    $(function() { 
     $('a#show').bind('click', function() { 
     $.getJSON('/show', { 
      a: $('input[name="node"]').val(), 
      b: $('input[name="parameter"]').val() 
     }, function(data) { 
      $("#result").text(data.result); 
     }); 
     return false; 
     }); 
    }); 
    </script> 

<form action=""> <!-- method = 'post'--> 
       <label for="node">Node</label> 
       <select name="node"> 
        {% for o in data_nodes %} 
        <option value="{{ o.name }}">{{ o.name }}</option> 
        {% endfor %} 
       </select> 
       <label for="parameter">Parameter</label> 
       <select name="parameter"> 
        {% for o in data_para %} 
        <option value="{{ o.name }}">{{ o.name }}</option> 
        {% endfor %} 
       </select> 
       <!-- Write your comments here --> 
       <button type="submit" class="btn btn-default" href="javascript:void(0);" id="show" >Send</button> 
</form> 

マイフラスコ側：

@app.route('/dashboard/', methods=['GET', 'POST']) 
def dashboard(): 
    return render_template("dashboard.html", data_nodes = [{'name': 'c9 - Office'}, {'name': 'f20 - Home'}, {'name': 'f21 - School'}], 
          data_para = [{'name': 'Temperature'}, {'name': 'RSSI'}, {'name': 'LQI'}]) # data_nodes, data_para 
@app.route('/show') 
def show(): 
    a = request.form.get('node') 
    b = request.form.get('parameter') 
    print a 
    print b 
    result = a+b 
    return jsonify(result) # I only intend to print the result on the page here for now. 

そして、ここでは私が得る応答です。ページもリフレッシュされます。

127.0.0.1 - - [24/Apr/2016 23:41:10] "GET /dashboard/?node=f20+-+Home&parameter=RSSI&time=t3 HTTP/1.1" 200 
127.0.0.1 - - [24/Apr/2016 23:41:05] "GET /static/js/ie10-viewport-bug-workaround.js HTTP/1.1" 404 - 

私はさまざまなバリエーションを試しましたが、なぜ結果が表示されないのか正確にはわかりません。ログファイルに基づいて

Answer 1

、あなたがあなたのウェブサーバに次の要求を行っています

127.0.0.1 - - [24/Apr/2016 23:41:10] "GET /dashboard/?node=f20+-+Home&parameter=RSSI&time=t3 HTTP/1.1" 200 

このことは、あなたが探しているパラメータは、リクエストパラメータとしてではなく、フォーム要素として来ています。これはpostを参照してより詳細な説明ができますが、formをargsに変更するだけです。

@app.route('/show') 
def show(): 
    a = request.args.get('node') 
    b = request.args.get('parameter') 

---

アップデート：エラーがHTMLファイルにもありますように

に見えます：

<script type=text/javascript> 
    $(function() { 
     $('#myForm').submit(function(ev) { 
     $.getJSON('/show', { 
      node: $('input[name="node"]').val(), 
      parameter: $('input[name="parameter"]').val() 
     }, function(data) { 
      $("#result").text(data.result); 
     }); 
     ev.preventDefault(); 
     }); 
    }); 
    </script> 

<form id='myForm' action=""> <!-- method = 'post'--> 
       <label for="node">Node</label> 
       <select name="node"> 
        {% for o in data_nodes %} 
        <option value="{{ o.name }}">{{ o.name }}</option> 
        {% endfor %} 
       </select> 
       <label for="parameter">Parameter</label> 
       <select name="parameter"> 
        {% for o in data_para %} 
        <option value="{{ o.name }}">{{ o.name }}</option> 
        {% endfor %} 
       </select> 
       <!-- Write your comments here --> 
       <button type="submit" class="btn btn-default" href="javascript:void(0);" id="show" >Send</button> 
</form>