伸缩自如的Flask [day 8] ajax with jquery

在[day 7]使用form tag 来进行submit的时候，不知道大家心里会不会有个疑问?
我要是不想要跳页呢?我要是有10个form，我真的会写11个html吗?我能不能在同一个页面Post资讯，
同时获得结果，也许你可以考虑用ajax来将input的值进行传送。

https://github.com/wilsonsujames/flask_tutorial/tree/main/flask_ajax

在index.html 221行开始:

<div class="form-group">
  <label for="theName">Name:</label>
  <input type="text" class="form-control" id="theName" >
</div>
<div class="form-group">
  <label for="thefood">Food:</label>
  <input type="text" class="form-control" id="thefood">
</div>
<button id='testBTN' type='button'>testButton</button>     

可以看到这里有两个input及一个button按钮，
注意
请一定要加上type='button'这个属性，否则按钮有可能会因为不知道自己的type为submit还是button，而发生後续程序行为上的分歧。

在238行的部分，可以看到我们用Jquery来回传时，要加上:

<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

接着看到重点ajax的部分:

<script language="javascript" type="text/javascript">
$('#testBTN').click(
  function() {
var form_data = new FormData();
form_data.append('theName', $("#theName").val());
form_data.append('thefood', $("#thefood").val());
// form_data.append('xxx', $("#xxx").text());
//附带text也是可以的
$.ajax({
      type: "POST",
      url: $SCRIPT_ROOT + "/route_function",
      data: form_data,
      success: (data) => {
        console.log(data.validate);

        alert(data.validate)
        alert(data.Rtnfood)
        //也可以用jquery来呈现结果
      },
      contentType: false,
      processData: false,
      dataType: "json"
    });
}
);
</script>

我们将input的值塞进form的物件form_data，利用POST的方式带到route为"/route_function"的function。

@app.route('/route_function',methods=[ "GET",'POST'])
def route_function():
    theFood = request.form.get('thefood')
    print(theFood)
    return jsonify({'validate': 'formula success','PayAmount':1500,'Rtnfood':theFood})

注意
搭配jquery ajax的function回传一定要是json形式。

好的现在当回传成功时，我们将data.Rtnfood给alert出来，确定回传成功。

这辈子没想过可以在家工作，而且可以长达三个礼拜。

• [day 1] 开场白
• [day 2] blue_print
• [day 3] Factory mode
• [day 4] JWT token
• [day 5] session
• [day 6] Jinja
• [day 7] Post data with Form tag
• [day 8] ajax with jquery
• [day 9] request
• [day 10] 将资料写进DB(pymongo)
• [day 11] log with mongoDB
• [day 12] Sql Database
• [day 13] 档案上传
• [day 14] 档案下载 及 其他传值方法
• [day 15] boostrap 4.6
• [day 16] API
• [day 17] Docker image化--安装篇
• [day 18] Docker image化--运行篇
• [day 19] Nginx
• [day 20] Docker compose
• [day 21] Nginx with https
• [day 22] pythonanywhere 部署
• [day 23] GCP app engine (介绍)
• [day 24] GCP app engine (deploy)
• [day 25] Flask with web cam
• [day 26] Flask with ML
• [day 27] Supervisor
• [day 28] Flask-Mail
• [day 29] Line Messaging API
• [day 30] 结语