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型传至前台
3276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
