AJAX是前端技术的集合,包括Javascript、XML、HTML、CSS等。
AJAX的作用提升用户体验。
JQueryJQuery是一个兼容多种浏览器的Javascript库。
JQuery的作用JQuery简化Javascript的使用,同理,简化AJAX的使用。
在线链接Django版本:3.0.6
JQuery版本:1.12.4
AJAX的使用方法
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST请求仅返回HttpResponse值
return render(request, 'error.html') #GET请求返回error.html界面
error.html #使用error界面进行测试
error
+
=
{% csrf_token %}
输出效果:输入2+2,点击计算,异步计算结果为4并返回前端
X3倍后代码urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST请求仅返回HttpResponse值
return render(request, 'error.html') #GET请求返回error.html界面
error.html #使用error界面进行测试
error
+
=
+
=
+
=
{% csrf_token %}
输出效果:分别输入三组数值,点击不同的计算,异步计算结果后根据点击的计算返回前端
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST请求仅返回HttpResponse值
return render(request, 'error.html') #GET请求返回error.html界面
error.html #使用error界面进行测试
error
{% for i in '369'|make_list %}
+
=
{% endfor %}
{% csrf_token %}
输出效果:分别输入三组数值,点击不同的计算,异步计算结果后根据点击的计算返回前端
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST请求仅返回HttpResponse值
return render(request, 'error.html') #GET请求返回error.html界面
error.html #使用error界面进行测试
error
{% for i in '369'|make_list %}
+
=
{% endfor %}
{% csrf_token %}
输出效果:值输到哪里,哪里就会显示出结果,无须点击计算按钮
最后把计算按钮隐藏一下
本来还想做一下一键全部提交代码、输入完成后全数据提交代码两个功能,但发现这样要提交的post值太多了,还是一次提交单个或单行数据比较靠谱
参考链接:
https://www.cnblogs.com/yangyi215/p/14964897.html
https://www.cnblogs.com/oldpai/p/9637774.html



