Ajax
Ajax用于在不刷新整个页面的情况下,在后台将数据提交给服务器,再使服务器返回的数据更新局部页面。
通常,要使用Ajax需要一个客户端Web页面和一个或多个服务器端脚本。
在Django中,客户端Web页面和服务器端脚本中均可用视图来实现。
举例:
E:\HDCZU_Test\chapter7\app\views.py文件
from app.models import person
from django.template.response import TemplateResponse
from django.http import HttpResponse
def getinfofirst(request):
return TemplateResponse(request,"temajax.html")
def getPersonInfo(request):
ps=person.objects.filter(name__startswith=request.GET['name'])
if ps.count()>0:
result='姓名以"%s"开头的用户信息:<br><table>'%request.GET['name']
n=0
for a in ps:
n+=1
result+="<tr><td>%s</td><td>%s</td><td>%s</td></tr>" %(n,a.name,a.age)
result+='</table>'
else:
result='没有匹配的用户信息!'
return HttpResponse(result)
举例:E:\HDCZU_Test\chapter7\app\models.py文件
from django.db import models
class person(models.Model):
name=models.CharField(max_length=50)
age=models.SmallIntegerField()
举例:E:\HDCZU_Test\chapter7\app\templates\tempajax.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="" method="POST">
{% csrf_token %}
请输入姓名:<input type="text" id="name" name="name">
</form>
<span id="result"></span>
<script>
$(document).ready(function(){
$('input').keyup(function(){ //在输入数据时,从服务器获取匹配用的用户信息
var a=$("#name").val();
$.get("/getinfo/",{"name":a},function (ret){
$("#result").html(ret) //将响应结果添加到网页
})
});
});
</script>
</body>
</html>
举例:E:\HDCZU_Test\chapter7\chapter7\urls.py文件
from django.contrib import admin
from django.urls import path
from app import views
urlpatterns = [
path('admin/', admin.site.urls),
path('first/',views.getinfofirst),
path('getinfo/',views.getPersonInfo),
]

ajax实现不用刷新返回服务器端所有数据2.png

ajax实现不用刷新返回服务器端所有数据.png
网友评论