Ajax post返回给定的url而不是发布的数据

时间:2017-04-19 08:30:26

标签: python html ajax flask

我有这个html(+ JS)代码:

<div id="input_form">
   <fieldset>
      <form id="myform" method="post" action="">
         seq: <input type="text" name="seq" id = "seq"><br><br>
         aa: <input type="text" name="prot" id = "prot"><br><br>
         <input type="submit" name="submit" id = "submitID" value="translate">
      </form>
   </fieldset>
</div>
<script>
   $("#submitID").click(function() {
      document.body.style.background = 'red';
      $.ajax({
         type: "POST",
         url: "/<seq>",
         data: 'message',
         success: function(data) {  
            document.body.style.background = 'green';
            document.getElementById("prot").value = data;
            alert(data); // show response from the python script.
         },
         error: function(xhr, ajaxOptions, thrownError){
            alert(xhr.responseText);
         }
      });
      return false; // avoid to execute the actual submit of the form.
   });
</script>

此外我有这个python脚本:

from flask import Flask, render_template
app = Flask(__name__)


@app.route('/')
def home_page():
    return render_template("afvink1.html")


@app.route("/<seq>",methods=['POST','GET'])
def seq(seq):
    return seq

if __name__ == "__main__":
    app.run()

但是,我没有在message文本字段中看到prot字符串,而是在<seq>文本字段中看到了网址:prot。我没有得到任何错误/例外。我试图将网址更改为<seq>,导致同样的错误。

2 个答案:

答案 0 :(得分:1)

<seq>表示它是网址的动态部分。 seq将传递给视图函数。您在ajax代码中编写<seq>。因此seq(视图函数的参数)将为<seq>。视图函数将其作为响应数据返回给您。

答案 1 :(得分:1)

使用以下答案来满足您的要求。

@app.route("/seq", methods=['POST', 'GET'])
def seq():
    if request.method == 'POST':
        print(request.form)
        return request.form['message']
    else:
        // Do Stuff here for GET request
        // return ''

ajax POST请求如下:

<script>
$("#submitID").click(function() {
    document.body.style.background = 'red';
    $.ajax({
            type: "POST",
            url: "/seq",
            data: {
                message: 'message' // you can send other parameters here.
            },
            success: function(data)
            {
               document.body.style.background = 'green';
               document.getElementById("prot").value = data;
               alert(data); // show response from the python script.
            },
            error: function(xhr, ajaxOptions, thrownError){
                alert(xhr.responseText);
            }
         });
    return false; // avoid to execute the actual submit of the form.
});
</script>

正如我在评论中所解释的那样,问题在于你的路线(你在Flask后端指定的方式)。