python Flask & Ajax 数据传输

python 评论

帮朋友写个小工具，没想到还要搞定JS，大学毕业后就没有写过JS，真的是难为我了😂

忙活三个小时，终于把前端和后端打通了～～

前端demo：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>

<!-- 发送数据，表单方式 （注意：后端接收数据对应代码不同）-->
<form action="{{ url_for('send_message') }}" method="post">
    <textarea name ="domain" rows="30" cols="100" placeholder="请输入需要查询的域名,如cq5999.com"></textarea>
    <!--<input id="submit" type="submit" value="发送">-->
    <button type="submit" id="btn-bq" data-toggle="modal" data-target="#myModal">查询</button>
</form>

<!-- 发送数据，input方式 （注意：后端接收数据对应代码不同） -->
<div>
    <label for="send_content">向后台发送消息：</label>
    <input id="send_content" type="text" name="send_content">
    <input id="send" type="button" value="发送">
</div>
<div>
    <label for="recv_content">从后台接收消息：</label>
    <input id="recv_content" type="text" name="recv_content">
</div>

<!-- input方式 对应的js代码，如用表单方式请注释掉 -->
<!-- 发送 -->
<script type="text/javascript">
    $("#send").click(function () {
        var message = $("#send_content").val()
        alert(message)
        $.ajax({
            url:"/send_message",
            type:"POST",
            data:{
                message:message
            },
            dataType: 'json',
            success:function (data) {

            }
        })
    })
</script>

<!-- 接收 -->
<script type="text/javascript">
    $("#send").click(function () {
        $.getJSON("/change_to_json",function (data) {
            $("#recv_content").val(data.message) //将后端数据显示在前端
            console.log("传到前端的数据的类型：" + typeof (data.message))
            $("#send_content").val("")//发送的输入框清空
        })
    })
</script>

</body>
</html>

后端demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index_v6.html")

@app.route('/send_message', methods=['POST'])
def send_message():
    global message_get
    message_get = ""

    message_get = request.form["domain"].split('\n')
    # message_get = request.form['message'] #input提交
    print("收到前端发过来的信息：%s" % message_get)
    print("收到数据的类型为：" + str(type(message_get)))

    return "收到消息"


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

    global message_get
    message_json = {
        "message": message_get
    }

    return jsonify(message_json)


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80,debug=True)

Brent大数据工程师 & 机器学习

一心九用的工程师