美文网首页
Django的ajax

Django的ajax

作者: Chaweys | 来源:发表于2020-11-09 08:33 被阅读0次

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

相关文章

网友评论

      本文标题:Django的ajax

      本文链接:https://www.haomeiwen.com/subject/scthbktx.html