當通過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

根據您的日誌文件，你正在以下請求到Web服務器：

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>