用AJAX和flask写成的网页版计算器

最新推荐文章于 2023-10-14 18:16:30 发布

**kwargs

最新推荐文章于 2023-10-14 18:16:30 发布

阅读量403

点赞数

本文链接：https://blog.csdn.net/liuxingxing_star/article/details/103880697

版权

第三阶段专栏收录该内容

20 篇文章 0 订阅

订阅专栏

小后台：

from flask import Flask
from flask import render_template
from flask import request


app = Flask(__name__)

@app.route('/calcServer')
def get_02():
    # 如果是get请求：
        # 有数据：处理get请求提交的数据
        # 如果没有数据，显示页面calc.html
    if request.method == 'GET':
        num1 = request.args.get('num1')
        num2 = request.args.get('num2')
        opt = request.args.get('opt')
        if request.args:
            if opt == '0':
                return "%s+%s=%s"%(num1, num2, str(int(num1)+int(num2)))
            else:
                return  "%s-%s=%s"%(num1, num2, str(int(num1)-int(num2)))
        else:
            return render_template('calc.html')


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

网页端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页计算器</title>
</head>
<body>
    <div>
        <input type="text" id="num1">
    </div>

    <div>
        <select name="" id="opt">
            <option value="0">加</option>
            <option value="1">减</option>
        </select>

        <div>
            <input type="text" id="num2">
        </div>

        <button id="btn">计算</button>

        <div id="show">计算结果：</div>

    </div>
    <script src="../static/02_common.js"></script>
    <script>
        var btn = document.getElementById('btn')
            // 获取用户输入内容：num1, num2, opt
            // 将值和地址拼接成字符串
            // ：5000/calcServer?num1=10&opt=1&num2=20
            // 创建请求，open('get',url,asyn)
            // 监听事件 onreadystatechange，如果：readystate==4&&status==200
                    //获取响应结果 responseText 放入div的show中
            // 发送请求send（null）
        btn.onclick = function(){
            var num1 = document.getElementById('num1').value
            var num2 = document.getElementById('num2').value
            var opt = document.getElementById('opt').value
            
            var url = '/calcServer?num1='+num1+'&opt='+opt+'&num2='+num2

            xhr.open('get', url, true)

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById('show').innerHTML = xhr.responseText;
                }
            }

            xhr.send(null)

        }
    </script>
</body>
</html>

**kwargs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
用AJAX和flask写成的网页版计算器

小后台：from flask import Flaskfrom flask import render_templatefrom flask import requestapp = Flask(__name__)@app.route('/calcServer')def get_02(): # 如果是get请求： # 有数据：处理get请求提交的数据 ...
复制链接

扫一扫