ajax django 页面局部刷新
程序员文章站
2022-06-17 11:56:40
...
经过三天的百度查询，初步实现了网页异步刷新
准备路由
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
path('add/', views.add),
]
对应的视图
def index(request):
return render(request, 'home.html')
def add(request):
a = request.GET['a']
b = request.GET['b']
c = int(a)+int(b)
return HttpResponse(str(c))
对应的页面
遇到的坑：
- ==一定要有下面这句（类似于Python引入第三方库），这里是引入Jquery：
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
- html里面的==form action="/add/" method=“get”==这句可有可无 ；这个才是请求的地址 $.get("/add/", {‘a’:a, ‘b’:b}, function (ret) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/add/" method="get">
a:<input type="text" name="a" id="a"><br>
b:<input type="text" name="b" id="b"><br>
<p>result:<span id="result"></span></p>
<button type="button" id="sum">Calc</button>
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#sum").click(function () {
var a = $('#a').val();
var b = $('#b').val();
$.get("/add/", {'a':a, 'b':b}, function (ret) {
$("#result").html(ret)
})
});
});
</script>
</body>
</html>
上一篇： 深入理解Java枚举类型(enum)
下一篇： MISC第四篇——gif