伸缩自如的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] 结语