django:jquery中ajax的简单使用
2019-11-15 本文已影响0人
dddddo
创建django项目projectaa，创建应用appaa。
在urls窗口编写代码，projectaa/projectaa/urls:
from django.contrib import admin
from django.urls import path
from appaa import views
urlpatterns = [
path('admin/', admin.site.urls),
path('aa/', views.aa),
]
在views窗口编写代码，projectaa/appaa/views:
from django.shortcuts import HttpResponse, render
@csrf_exempt
def aa(request):
if request.method == 'GET':
return render(request, "aaaa.html")
else:
aa = request.POST.get('input_a')
bb = request.POST.get('input_b')
cc = float(aa)+float(bb)
return HttpResponse(cc)
在template创建aaaa.html，并编写代码，projectaa/template/aaaa.html:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="." method="post">
{% csrf_token %}
<input type="text" id="input_a">
<input type="text" id="input_b">
<p>The sum of a and b is </p>
<input type="text" id="input_c">
<input type="button" onclick="calculate()" value="Calculate">
</form>
<script src="{% static 'jquery-3.4.1.js' %}"></script>
<script>
function calculate(){
$.ajax({
url: "/aa/",
type: "post",
data: {
"input_a":$('#input_a').val(),
"input_b":$('#input_b').val(),
},
success:function (data) {
console.log(data);
$("#input_c").val(data);
}
})
}
</script>
</body>
</html>
创建static文件夹。因为要使用jquery，所以要下载jquery的较新的版本，并放置在static文件夹中，此文中路径是，
projectaa/static/jquery-3.4.1.js。
在setting中设置static文件夹路径，在setting文件最下面增加以下代码，
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
在template/aaaa.html中增加以下代码，
{% load staticfiles %}
在浏览器中输入地址127.0.0.1:8000/aa/。
如果没有实现目的，尝试在terminal中运行命令
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
