使用ajax完成一个简单加法运算

最新推荐文章于 2018-09-20 10:55:00 发布

qq1105273619

最新推荐文章于 2018-09-20 10:55:00 发布

阅读量1k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的Ajax计算器项目，通过前端HTML页面与后端交互完成两个数的乘法运算。前端使用JavaScript发起Ajax请求并将结果显示在页面上，后端采用Python Flask框架接收请求并返回计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cal.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax calculator</title>
</head>
<body>
    <input type="text" id="num_1" name="num_1"> * <input type="text" id="num_2" name="num_2"> = <input type="text" id="num_3" name="num_3">
    <br>
    <button onclick="cal()">计算</button>
</body>
<script>
    function cal() {
        var xhr;
        var num_1=document.getElementById('num_1').value;
        var num_2=document.getElementById('num_2').value;

        xhr= new XMLHttpRequest();

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

        xhr.open('GET','/ajax_cal/?num_1='+num_1+'&num_2='+num_2); ##手动构造url传参
        xhr.send();

    }
</script>
</html>

后台接收ajax路由函数

@app.route('/ajax_cal/')
def ajax_cal():
    ##将由地址栏传过来的参数转换为int型
    num_1=int(request.args.get('num_1'))
    num_2=int(request.args.get('num_2'))

    result=num_1*num_2

    return str(result)  ##将计算结果转换为string型传至前台