通過AJAX和Flask傳遞值時無響應

Question

我是AJAX和Flask的新手。 我在這里詢問如何傳遞值並將其顯示在同一頁面上而無需刷新頁面，我被告知有關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>

我的Flask面：

@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

這意味着，您要查找的參數是作為請求參數而不是表單元素輸入的。 您可以參考這篇文章以進行更全面的討論，但是我只是將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>