您的位置：首页 > 其它

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

2018-03-03 20:55 197 查看

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型传至前台

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航