Django使用AJAX调用自己写的API接口


具体代码和数据已上传到github

https://github.com/PythonerKK/eleme-api-by-django-restful-framework


在这个例子中,我们将使用Django编写饿了么高校外卖商家查询API接口,并且使用AJAX技术来实现API接口的使用,包括使用ajax get方法加载更多数据,使用ajax方法来更新、修改、新增、删除数据。利用API可以做到前后端分离,为开发web应用提供了便利。

安装rest framework

首先使用Pycharm新建一个Django项目,并且使用virtualenv或者pipenv虚拟环境



创建成功会自动安装Django2.1和所需依赖,restframework框架需要自己手动安装

//激活虚拟环境安装以下
(venv)$ pip install djangorestframework
(venv)$ pip install django-filter
(venv)$ pip install pytest
(venv)$ pip install pytest-django
//由于笔者使用Postgresql数据库,所以还需要安装以下
(venv)$ pip install psycopg2
//使用mysql数据库安装如下
(venv)$ pip install pymysql

准备数据来提供服务

数据来源:饿了么爬虫

数据内容:全国所有大学附近的外卖商家Top20

数据需要导入数据库

Django编写rest api接口

项目结构



settings.py.

// 安装的app如下
INSTALLED_APPS = [
#...
'rest_framework',
'django_filters',
'api.apps.ApiConfig',
'front.apps.FrontConfig',
]
//restframework 配置如下 REST_FRAMEWORK = {
//这里配置了分页处理,每页最多20个项目
'DEFAULT_PAGINATION_CLASS':'api.custompagination.LimitOffsetPaginationWithUpperBound',
'PAGE_SIZE': 20,
'DEFAULT_FILTER_BACKENDS': (
//这里配置了排序、过滤、搜索器
'django_filters.rest_framework.DjangoFilterBackend',
'rest_framework.filters.OrderingFilter',
'rest_framework.filters.SearchFilter',
),
//这里配置了用户认证,管理员才可以更改内容,未登录不能更改
'DEFAULT_AUTHENTICATION_CLASSES':(
'rest_framework.authentication.BasicAuthentication',
'rest_framework.authentication.SessionAuthentication',
),
//这里配置了访问次数限制,过多会返回429错误 too many requests
'DEFAULT_THROTTLE_CLASSES': (
'rest_framework.throttling.AnonRateThrottle',
'rest_framework.throttling.UserRateThrottle',
),
//这里配置了访问次数,anon代表匿名用户,user代表已登录用户,entries是我自己设置的作用域,300/hour代表最多300次每小时
'DEFAULT_THROTTLE_RATES': {
'anon': '300/hour',
'user': '100/hour',
'entries': '200/hour',
},
'DEFAULT_VERSIONING_CLASS':'rest_framework.versioning.NamespaceVersioning',
}

models.py.

from django.db import models

class Entry(models.Model):
city = models.CharField(max_length=50)
school = models.CharField(max_length=100)
link = models.CharField(max_length=100,null=True,default='null')
name = models.CharField(max_length=200)
lat = models.CharField(max_length=20,null=True,default='0.0')
lng = models.CharField(max_length=20,null=True,default='0.0')
address = models.CharField(max_length=200,null=True,default='null')
distance = models.CharField(max_length=20,null=True,default='0')
time = models.CharField(max_length=20,null=True,default='0:00')
contact = models.CharField(max_length=200,null=True,default='null')
score = models.CharField(max_length=10,null=True,default='0')
comments = models.CharField(max_length=20,null=True,default='0')
sell = models.CharField(max_length=20,null=True,default='0')
image = models.CharField(max_length=200,null=True,default='null')
owner = models.ForeignKey('auth.User',related_name='entries',on_delete=models.CASCADE)
# class Meta:
# ordering = ('name',)
def __str__(self):
return self.name

serializers.py.

from rest_framework import serializers
from api.models import Entry
//这里继承自超链接模型序列器,用于把数据转换为json格式,并且显示链接
class EntrySerializer(serializers.HyperlinkedModelSerializer):
owner = serializers.ReadOnlyField(source='owner.username')
class Meta:
model = Entry
fields = ('url','pk','name','city','school','link','lat','lng','address','distance','time','contact',
'score','comments','sell','image','owner')

views.py.

from rest_framework import generics
from rest_framework.response import Response
from rest_framework.reverse import reverse
from api.models import Entry
from api.serializers import EntrySerializer
from rest_framework import permissions
from rest_framework.permissions import IsAuthenticated
from rest_framework.throttling import ScopedRateThrottle
from api import custompermission //这里是获取所有数据,可实现HTTP get、Post、Option操作
class EntryList(generics.ListCreateAPIView):
//限流自定义作用域
throttle_scope = 'entries'
throttle_classes = (ScopedRateThrottle,)
queryset = Entry.objects.all()
serializer_class = EntrySerializer
name = 'entry-list'
filter_fields = ('city','school','name')
search_fields = ('school','city')
ordering_fields = ('city') //管理员才能post操作创建新的数据
permission_classes = (
permissions.IsAuthenticatedOrReadOnly,
custompermission.IsCurrentUserOwnerOrReadOnly,
) def perform_create(self, serializer):
serializer.save(owner=self.request.user) //这里是获取具体某一项的数据,可实现HTTP GET、PUT、PATCH、Option操作
class EntryDetail(generics.RetrieveUpdateDestroyAPIView):
throttle_scope = 'entries'
throttle_classes = (ScopedRateThrottle,)
queryset = Entry.objects.all()
serializer_class = EntrySerializer
name = 'entry-detail' permission_classes = (
permissions.IsAuthenticatedOrReadOnly,
custompermission.IsCurrentUserOwnerOrReadOnly,
) //api根目录
class ApiRoot(generics.GenericAPIView):
name = 'api-root'
def get(self, request, *args, **kwargs):
return Response({
'entries': reverse(EntryList.name, request=request),
})

urls.py.

from django.urls import path
from api import views
urlpatterns = [
path('entries/', views.EntryList.as_view(), name=views.EntryList.name),
path('entry-detail/<int:pk>', views.EntryDetail.as_view(), name=views.EntryDetail.name),
path('', views.ApiRoot.as_view(), name=views.ApiRoot.name)
]

ele/urls.py.

from django.urls import path,include

urlpatterns = [
path('v1/',include('api.urls')),
path('v1/api-auth/',include('rest_framework.urls')),
path('',include('front.urls'))
]

以下为启动界面



到此为止非常简单的api就写完了,接下来就是自动化测试是否达到预期效果。

如图,测试通过!

在程序中调用刚刚写好的api

创建一个新的app并且添加到settings.py里面

(venv)$ python manage.py startapp front

做好的效果如下:点击加载更多会触发ajax

由于篇幅有限,这里贴出js代码

使用ajax get请求刚刚写好的api接口并且添加到表格中

myjs.js.

$('#load-more').click(function () {
$.ajax({
method:'GET',
url:api_url,
dataType:'json',
success:function (data) {
api_url = data['next'];
if (api_url == null){
$('#load-more').val('已加载全部');
$('#load-more').attr('disabled',true);
//api_url这里就是刚刚写好的api接口
api_url = 'v1/entries/';
}
var results = data['results'];
for (i=0;i<results.length;i++){
$('#ele-table-body').append(
' <tr>\n' +
' <th scope="col">'+results[i]['pk']+'</th>\n' +
' <th scope="col">'+results[i]['city']+'</th>\n' +
' <th scope="col"><a href="/detail/' + results[i]['pk'] +'">' + results[i]['name'] + '</a></th>\n' +
' <th scope="col">'+results[i]['school']+'</th>\n' +
' <th scope="col">'+results[i]['score']+'</th>\n' +
' </tr>'
)
} }
})
});

可以修改具体的一条数据,使用ajax patch方法提交数据。

注:PUT方法是修改所有数据,而PATCH方法是修改局部数据



myjs.js.

    $('#edit-confirm-btn').click(function () {
var name = $('#name').val();
var distance = $('#distance').val();
var adderss = $('#address').val();
var time = $('#time').val();
var score = $('#score').val();
var comments = $('#comments').val();
var sell = $('#sell').val();
var pk = $('#pk').val();
$.ajax({
type:'PATCH',
url:'/detail/' + pk,
data:{
"name": name,
"distance": distance,
"address": adderss,
"time": time,
"score": score,
"comments": comments,
"sell": sell,
}, success:function (data) {
if (data.status == 'ok'){
console.log('success');
location.reload();
}
}
})
})

本文通过一个小例子介绍了如何使用Django调用自己写的api

Django使用AJAX调用自己写的API接口的更多相关文章

  1. 如何调用EcStore中的API接口

    EcStore系统已内置了丰富的API接口供外部系统调用(接口列表见文章最下面),外部系统具体如何调用这些API呢? 例如有一个PHP的论坛需要调用ecstore系统内一个商品的详情,则可以使用b2c ...

  2. 第一次写Web API接口

    API是什么?只知道是网络接口,具体怎么写?不会!如何调用?不会!那怎么办? 第一次的经历~~ 需求:为其他项目提供一个接口 功能:为项目提供询盘信息和商家信息,格式为Json字符串 拿过来,就开始做 ...

  3. PC端写的API接口和手机端APP联合调试

    一.遇到问题的情况:项目框架:asp.net MVC5 ,写的给手机端调用的API接口. 二.自己在本地 IIS上部署项目,在手机端的请求服务器上把地址和端口换上本地部署的,如图所示 三.用管理员的身 ...

  4. Python用Django写restful api接口

    用Python如何写一个接口呢,首先得要有数据,可以用我们在网站上爬的数据,在上一篇文章中写了如何用Python爬虫,有兴趣的可以看看: https://www.cnblogs.com/sixrain ...

  5. ajax调用免费的天气API

    最近在做项目中要用到调用天气接口,在网上找了很多资料之后发现https://www.tianqiapi.com/的天气API挺好的,好用而且免费,调用也很简单.在此做个笔记,大家一起学习交流,如有问题 ...

  6. Ajax之调用一言网站API接口

    Ajax的作用,主要是实现局部刷新. 通过老大哥告知,Ajax接口可以使用一言网站的,所以自己就练了一下子. 本文所有用到的接口都来自一言网站:https://hitokoto.cn/api 通过网站 ...

  7. 研发团队如何写好API接口文档

    导读 背景 痛点在哪? 为什么要写接口文档? API规范 接口工具 总结 背景        随着业务的发展,支撑组的项目也是越来越多.同时,从整个支撑组项目架构体系(含运维和运营体系),我们对系统业 ...

  8. 原生Ajax的使用——含开放API接口

    看了两天关于Ajax的使用,总感觉云里雾里的. 故在此总结梳理一下,如果疏漏错误还请纠正支出. Ajax能够在向服务器请求额外的数据时,不必重新加载/卸载整个页面,实现一小块区域性的刷新,也是常说的异 ...

  9. 初识Django —Python API接口编程入门

    初识Django —Python API接口编程入门 一.WEB架构的简单介绍 Django是什么? Django是一个开放源代码的Web应用框架,由Python写成.我们的目标是用Python语言, ...

随机推荐

  1. MVC实用构架设计(三)——EF-Code First(6):数据更新最佳实践

    前言 最近在整理EntityFramework数据更新的代码,颇有体会,觉得有分享的价值,于是记录下来,让需要的人少走些弯路也是好的. 为方便起见,先创建一个控制台工程,使用using(var db ...

  2. 转:linux下jar命令与jar包

    原文链接:http://blog.chinaunix.net/uid-692788-id-2681136.htmlJAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有 ...

  3. Html5三维全景

    先看DEMO:http://think.weiyingjia.cn/liuming/quanjing/out.html 准备: 1.一张或多张全景图片素材    2.pano2VR软件,链接:http ...

  4. 关于bootstrap--列表(ol、ul)

    1.list-unstyled : 在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-styled& ...

  5. ADO.NET 数据访问类查询、属性扩展

    今天,我首先在之前所做的人员管理系统的基础上,利用数据访问类进行了所有人员信息的查询. 主程序代码: List<Users> Ulist = new UsersData().Select( ...

  6. 一个C#程序员学习微信小程序的笔记

    客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通 ...

  7. PdfReader按页将PDF切割成多个PDF

    private MemoryStream GetNewPdfByPageNum(PdfReader pdfReader, int pageNum) { MemoryStream memoryStrea ...

  8. win-DOS命令整理

    1 md 建 文件夹2 cd 指向文件夹方向cd .. 进入上一级文件夹cd \ 回到根目录3 rd 删除文件夹4 dir 查看文件夹里的文件 dir /a 查看文件夹内全部文件含隐藏文件 5 ren ...

  9. Java基础&amp;面向对象(二)

    (七)函数 1.数的定义:具有特定功能的一段小程序,也称为方法: 2.函数的特点: 3.函数的应用:结果.是否需要未知内容参与运算: 4.函数的重载:在同一个类中,允许存在一个以上的同名函数,只要它们 ...

  10. 【react】---context的基本使用---【巷子】

    一.context的理解 很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的stor ...