python flak 回傳值給網頁javascript

python javascript html flask xmlhttprequest

alanotmt 2022-08-31 16:38:38 ‧ 1581 瀏覽

分享至

Python :

#!flask/bin/python
import pymysql.cursors
from flask import Flask, request, render_template,Response


app = Flask(__name__)

@app.route('/test_server', methods=['GET', 'POST'])
def   remove_group():
 
 if request.method == "GET":
        resp = Response(response='4',status=200,content_type='text/html;charset=utf-8')
        return resp
 return render_template("index.html")


if __name__ == '__main__':
  app.run(
  host="127.0.0.1",
  port=int("8000"))

Html:

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  let url= 'http://127.0.0.1:8000/test_server?name=test';
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
  xhttp.send();
}
</script>

</body>
</html>

參考了:
https://www.w3schools.com/xml/xml_http.asp
https://gist.github.com/KentaYamada/2eed4af1f6b2adac5cc7c9063acf8720
https://jeffwen0105.com/%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%BD%BF%E7%94%A8-python-flask-restful-api-%E5%B0%B1%E4%B8%8A%E6%89%8B-get-%E6%96%B9%E6%B3%95/

三個網址我都試過，第一個網站我了解到他是在open那邊獲得responseText，
第二網站如果完全抄code是沒辦法跑，但大概知道可能需要GET & POST 的功能，
第三個網站知道原來還有return 寫法，結果怎麼寫都是 java端那邊都是收不到return的值

求大神找找原因，小弟我已經卡了快兩天都找不到頭緒。

更:

我好像找到問題了，都不是出在程式的問題，而是因為我開了xampp的apache 然後網頁地址是127.0.0.1:80
然後flask的地址是:127.0.0.1:8000

flask會收到網頁的req並顯示正確收到:a
127.0.0.1 - - [01/Sep/2022 10:56:17] "GET /api/test HTTP/1.1" 200 -
但回傳時header好像就會錯誤，網頁端就會出現:
Ensure CORS response header values are valid

看更多先前的討論...收起先前的討論...

hokou iT邦好手 1 級 ‧ 2022-08-31 16:49:35 檢舉

第2個是可以跑的
你的 index 有放到 templates 資料夾嗎
不過你的 html 沒有 form 而且用 GET，但卻要 py 在 POST 時去抓 form 的值

alanotmt iT邦新手 4 級 ‧ 2022-08-31 17:09:09 檢舉

我第二個有放在templates 而且有在xampp 跑apache 或沒有都試過，
python 如果完全抄code會顯示 * Restarting with stat ，我加了app.run(use_reloader=False) 也試過~還是失敗沒反應，一直卡在處理

alanotmt iT邦新手 4 級 ‧ 2022-08-31 17:25:17 檢舉

後面我也不抓值了，就很單純請他在get的時侯回傳值name，結果也是有收到，但沒回傳成功....

froce iT邦大師 1 級 ‧ 2022-09-01 08:17:55 檢舉

CORS是因為你不同domain的關係。
你搞前後端分離？
Port不同也是不同domain

在return resp前加上
resp.headers.add('Access-Control-Allow-Origin', '*')
試試

alanotmt iT邦新手 4 級 ‧ 2022-09-01 11:54:31 檢舉

成功了!!! 加入了resp.headers.add('Access-Control-Allow-Origin', '*') 感謝大神!!

alanotmt iT邦新手 4 級 ‧ 2022-09-01 11:54:43 檢舉

成功了!!! 感謝大神!!

froce iT邦大師 1 級 ‧ 2022-09-01 13:31:17 檢舉

你要先搞懂你apache是怎麼設定的，把 Access-Control-Allow-Origin 全開是有資安疑慮的。
看你這樣應該是apache的設定搞不定。

alanotmt iT邦新手 4 級 ‧ 2022-09-05 09:25:31 檢舉

請教一下，所以這邊的apache是指python 那邊嗎? 因為是python加上 Access-Control-Allow-Origin 就能傳送

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

echochio

iT邦高手 1 級 ‧ 2022-08-31 22:24:40

給你幾個方向

首先直接傳值到 flask 看回應什麼？沒問題就OK 了
我是用 curl 測試, 或是你用其他工具測

curl -X POST 'http://127.0.0.1:8000' \
-H "Content-Type: application/x-www-form-urlencoded" \
-d "name=test" \

我遇到 javascript 送 http://127.0.0.1:8000/test_server?name=test
flask 收到 http://127.0.0.1:8000/test_server/?name=test
所以我兩個都有設定
我擷取我flask 發送郵件的ＡＰＩ程式一部份給您參考(post 收發 jsoan 的)

route_base = "/api"
@expose('/SendMAIL', methods=['POST'])
@expose('/SendMAIL/', methods=['POST'])
    def SendMAIL(self):
        dic = request.form
        print (dic)
        print (dic['message'])
        u = get_user(dic) # mailaddr 去取 user
        a = db.session.query(Member).filter_by(user = u).first()
        if(a is None):
            return jsonify([{'error_Code':403,'error_Message':'user fail'}])
        # 這段程式就不貼了
        return response.text

javascript 我是發 jason 收 jason 的貼一段給您參考

    $(document).ready(function() {
        $("#submitID").click(function() { //ID 為 submitID 的按鈕被點擊時
            CKupdate();
            var sendData = $('#submitID').serialize();
            $.ajax({
                type: "POST",//傳送方式
                url: $SCRIPT_ROOT + "/api/SendMAIL/", //傳送目的地
                dataType: "json", //資料格式
                data: { //傳送資料
                    subject:  $("#subject").val(), //表單字段 ID subject
                    mailaddr: $("#mailaddr").val(), //表單字段 ID mailaddr
                    message: $("#message").val() //表單字段 ID message
                },
                beforeSend: function () {
                    $("#submitID").val("處理中");
                    $("#submitID").css("background-color","aqua");
                    $("#submitID").attr({ disabled: "disabled" });
                },
                success: function(data) {
                    const myJSON = JSON.stringify(data);
                    $("#result").html( '<font color="#007500">回應 : <font color="#0000ff"><br />'+myJSON );
                },
                complete: function () {
                    $('#loading-image').remove();
                    $("#submitID").val("發送");
                    $("#submitID").css("background-color","red");
                    $("#ResetID").css("background-color","red");
                    $("#ResetID").attr({ disabled: "disabled" });
                },
                error: function(jqXHR) {
                    $("#datainput")[0].reset(); //重設 ID 為 datainput 的 form (表單)
                    $("#result").html('<font color="#ff0000">發生錯誤：' + jqXHR.status + '</font>');
                }
            })

回應 2
分享
檢舉

alanotmt iT邦新手 4 級 ‧ 2022-09-01 10:58:33 檢舉

我好像找到問題了，都不是出在程式的問題，而是因為我開了xampp的apache 然後網頁地址是127.0.0.1:80
然後flask的地址是:127.0.0.1:8000

echochio iT邦高手 1 級 ‧ 2022-09-02 21:51:16 檢舉

應該是說... 要看所有東西的 LOG
不懂的是為何你要把前端與 API 分開
API 可對外服務的 ....
flask 是可以直接當前端
apache 或 nginx 配合wsig 當反向代理
我是 nginx 直接連到 flask 或 django 當前端
所有東西都在 flask 或 django 的 router 內處理
前後端都是在 flask 或 django 比較不會搞混

登入發表回應

hokou

iT邦好手 1 級 ‧ 2022-09-01 09:46:56

參考這篇 Flask實作_基礎_07_POST and GET
我把他 return 的 form 另存到 index.html
route 跟 form 送出的先改成 "/"

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form method='post' action='/'><input type='text' name='username' />
  </br>
  <button type='submit'>Submit</button></form>
</body>
</html>

app.py

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST']) 
def login():
    if request.method == 'POST': 
        return 'Hello:' + request.values['username'] 
        
    return render_template("index.html")

if __name__ == '__main__':
    app.debug = True
    app.run()

正常來說一開始是 GET，會得到 return render_template("index.html") 的結果
打字，按鈕送出是 POST，會得到 return 'Hello:' + request.values['username'] 的結果

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

alanotmt iT邦新手 4 級 ‧ 2022-09-01 10:58:53 檢舉

我好像找到問題了，都不是出在程式的問題，而是因為我開了xampp的apache 然後網頁地址是127.0.0.1:80
然後flask的地址是:127.0.0.1:8000

froce iT邦大師 1 級 ‧ 2022-09-01 11:39:34 檢舉

看了你這樣回我就知道問題在哪了。

let url= 'http://127.0.0.1:8000/test_server?name=test';

改成

let url= '/test_server?name=test';

alanotmt iT邦新手 4 級 ‧ 2022-09-01 11:43:43 檢舉

froce 還是不行，但我有成功的方法，不過不是正解。

現在因為我的網頁是用xampp的apache打開，然後我網頁端req 資源的地方是本地端，而由於我開網頁已經佔用了本地端127.0.0.1:80 的地方所以我用python run地址在127.0.0.1.80 會衝到，然後我關掉apache 網頁就會讀到python 那邊的資料(成功互相溝通)，但是不是長久之計，因為我關掉apache代表我網頁一旦換頁就會404