通过 AJAX 和 Flask 传递值时没有响应

Posted 2023-03-16

【中文标题】通过 AJAX 和 Flask 传递值时没有响应

【英文标题】：No response when passing the values through AJAX and Flask

【发布时间】：2016-08-17 23:13:20

【问题描述】：

我是 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>

我的 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 -

我尝试了不同的变体，但我不确定为什么没有出现结果。

【参考方案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>

【讨论】：

我按照你的回答，但我仍然得到同样的东西。页面刷新，我对日志文件得到相同的响应。

日志文件中是否有一行请求 /show 端点？

没有。我不知道为什么它一直显示我 /dashboard ！会不会是我的按钮参数的原因？

嗯，我试图关注更新，但我仍然得到相同的结果：/。无论是页面还是日志