使用 jquery 将数据从 html 发布到烧瓶视图

Question

我有一个正在使用的下拉菜单。这是HTML：

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="{{url_for('static',filename='dropdown_change.js')}}"></script>


 <form action="{{url_for('select_ID')}}" method="POST">
  <label for="input_ID">ID</label>
  <input type="text" />
  <label for="Node_Type">Node_Type</label>
  <select id="dropdown_change">
    <option value=1>Customer</option>
    <option value=2>Phone</option>
    <option value=3>ID_Card</option>
  </select>
<input type='submit' value='Submit'>
</form>

这是我的烧瓶视图：

import db_connect_test
from db_connect_test import Viz_Connector
from flask import Flask, request, session, redirect, url_for, render_template, flash,json,jsonify
import os
app = Flask(__name__)
@app.route('/',methods = ['GET','POST'])
def select_ID():
    if request.method == 'POST':
        ID=request.form['input_ID']
        Node_Type = request.form['Node_Type']
        data = Viz_Connector(ID,Node_type).get_data()
        return  render_template('dropdown.html',data=json.dumps(data))


    return render_template('dropdown.html')

if __name__ == '__main__':
    host = os.getenv('IP','0.0.0.0')
    port = int(os.getenv('PORT',5000))
    app.secret_key = os.urandom(24)
    app.run(host=host,port=port)

这是我的下拉菜单。有一个用于“单击”提交按钮的事件监听器。我认为我是手的方式

    $('input[type=submit]').click(function() {
   var ID = $("#input_ID").val();
   var selectID = $("#dropdown_change").val();
   $.ajax({
     type: "POST",
     url: "/select_ID",

     data: {
       ID: ID,
       Node_Type: selectID  //right way to pass the data to flask?
     },
     success: function(data) {
       alert('SUCCESS: ' + data);
     },
     error: function(xhr, textStatus, errorThrown) {
       document.getElementById('dropdown_change').selectedIndex = 0;
       showMsg('ERROR: ' + errorThrown);
       return false;
     }
   });
   return false;
 });

当我运行它时它失败了：

   400:Bad request

Answer 1

在将数据发送到服务器之前，您需要对数据进行 url 编码。此外，您的路由不会将POST 拾取到路径/select_ID。你应该发帖到/。一个稍微巧妙的方法是读取 jQuery 中的 action 属性。

HTML：

<form action="{{url_for('select_ID')}}" method="POST">
    <label for="input_ID">ID</label>
    <input id="input_ID" type="text" />
    <label for="Node_Type">Node_Type</label>
    <select id="Node_Type">
        <option value=1>Customer</option>
        <option value=2>Phone</option>
        <option value=3>ID_Card</option>
    </select>
    <input type='submit' value='Submit'>
</form>

JavaScript：

$('input[type=submit]').click(function() {
    var input_ID= $("#input_ID").val();
    var Node_Type= $("#Node_Type").val();
    $.ajax({
        type: "POST",
        url: $(this).closest("form").attr("action"), // read the URL from the form attribute
        data: $.param({ // use $.param() to convert from a JSON object to url-encoded
            input_ID: input_ID,
            Node_Type: Node_Type
        }),
        success: function(data) {
            alert('SUCCESS: ' + data);
        },
        error: function(xhr, textStatus, errorThrown) {
            document.getElementById('Node_Type').selectedIndex = 0;
            showMsg('ERROR: ' + errorThrown);
            return false;
        }
    });
    return false;
});

注意：根据我上面的评论，我协调了 HTML ID 和 JavaScript 变量以使用 input_ID 和 Node_Type，因为这是服务器上所期望的。

Answer 2

尝试改变你的路线：

@app.route('/',methods = ['GET','POST'])
def select_ID():

到

@app.route('/select_ID',methods = ['GET','POST'])
def select_ID():