【Python知识地图】前端与后端交互：AJAX与RESTful API

已于 2024-08-26 17:25:02 修改
阅读量869 收藏 28
点赞数 23
分类专栏： Python知识地图 文章标签： 前端 python 交互 python知识地图
于 2024-08-26 17:21:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g310773517/article/details/141569255
版权

在现代 Web 开发中，前端和后端的分离是一个常见的架构模式。前端通过 AJAX（Asynchronous JavaScript and XML）与后端进行异步通信，从而实现动态更新页面的功能。RESTful API 是一种常用的 Web 服务接口设计风格，通过 HTTP 协议进行数据传输。本文将详细介绍 AJAX 与 RESTful API 的基本概念及其使用方法，并提供一些示例代码。

🧑 博主简介：现任阿里巴巴嵌入式技术专家，15年工作经验，深耕嵌入式+人工智能领域，精通嵌入式领域开发、技术管理、简历招聘面试。CSDN优质创作者，提供产品测评、学习辅导、简历面试辅导、毕设辅导、项目开发、C/C++/Java/Python/Linux/AI等方面的服务，如有需要请站内私信或者联系任意文章底部的的VX名片（ID：gylzbk）

💬 博主粉丝群介绍：① 群内高中生、本科生、研究生、博士生遍布，可互相学习，交流困惑。② 热榜top10的常客也在群里，也有数不清的万粉大佬，可以交流写作技巧，上榜经验，涨粉秘籍。③ 群内也有职场精英，大厂大佬，可交流技术、面试、找工作的经验。④ 进群免费赠送写作秘籍一份，助你由写作小白晋升为创作大佬。⑤ 进群赠送CSDN评论防封脚本，送真活跃粉丝，助你提升文章热度。有兴趣的加文末联系方式，备注自己的CSDN昵称，拉你进群，互相学习共同进步。

本专栏介绍：本专栏为Python初学者和中高级开发者提供全面的学习资源。预计收录100篇文章，内容涵盖基础语法、数据结构、面向对象编程、Web开发、数据分析、机器学习等领域。每篇文章都经过精心编写，帮助你快速掌握Python编程技巧。无论初学者还是希望提升技能的开发者，这里都能找到适合你的资源。可点击专栏主页查看所有文章。

在这里插入图片描述

【Python知识地图】前端与后端交互：AJAX与RESTful API

在这里插入图片描述

1. RESTful API 基础

1.1 什么是 RESTful API？

REST（Representational State Transfer）是一种软件架构风格，RESTful API 是遵循 REST 架构风格的 Web 服务接口。RESTful API 使用 HTTP 协议的各种方法（如 GET、POST、PUT、DELETE 等）进行数据操作，并通过 URL 来定位资源。

1.2 RESTful API 的基本操作

  • GET：从服务器获取资源
  • POST：在服务器创建资源
  • PUT：更新服务器上的资源
  • DELETE：删除服务器上的资源

1.3 RESTful API 示例

假设我们有一个用户管理的 RESTful API，支持以下操作：

  • GET /api/users：获取所有用户
  • GET /api/users/{id}：获取指定用户
  • POST /api/users：创建新用户
  • PUT /api/users/{id}：更新指定用户
  • DELETE /api/users/{id}：删除指定用户

2. 使用 Django 创建 RESTful API

2.1 安装 Django REST framework

在使用 Django 创建 RESTful API 之前，需要先安装 Django REST framework。可以使用 pip 命令进行安装：

pip install djangorestframework

2.2 配置 Django REST framework

在 settings.py 文件中配置 Django REST framework：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',
]

2.3 定义模型

在 models.py 文件中定义用户模型：

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=100)
    email = models.EmailField()
    age = models.IntegerField()

    def __str__(self):
        return self.username

2.4 创建序列化器

在 serializers.py 文件中创建序列化器：

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = '__all__'

2.5 创建视图

在 views.py 文件中创建视图：

from rest_framework import viewsets
from .models import User
from .serializers import UserSerializer

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer

2.6 配置路由

在 urls.py 文件中配置路由：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from . import views

router = DefaultRouter()
router.register(r'users', views.UserViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

2.7 运行服务器

在命令行中运行以下命令启动 Django 服务器：

python manage.py runserver

现在，RESTful API 已经可以通过 http://127.0.0.1:8000/api/users/ 进行访问。

3. 使用 AJAX 与 RESTful API 交互

3.1 什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器进行异步通信的技术。AJAX 使用 JavaScript 的 XMLHttpRequest 对象或现代浏览器提供的 fetch API 进行异步请求，并处理服务器的响应。

3.2 使用 XMLHttpRequest 进行 AJAX 请求

以下示例演示了如何使用 XMLHttpRequest 进行 AJAX 请求：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script>
        function loadUsers() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://127.0.0.1:8000/api/users/', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var users = JSON.parse(xhr.responseText);
                    var userList = document.getElementById('user-list');
                    userList.innerHTML = '';
                    users.forEach(function(user) {
                        var li = document.createElement('li');
                        li.textContent = user.username + ' (' + user.email + ')';
                        userList.appendChild(li);
                    });
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="loadUsers()">Load Users</button>
    <ul id="user-list"></ul>
</body>
</html>

3.3 使用 fetch API 进行 AJAX 请求

以下示例演示了如何使用 fetch API 进行 AJAX 请求：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script>
        async function loadUsers() {
            const response = await fetch('http://127.0.0.1:8000/api/users/');
            const users = await response.json();
            const userList = document.getElementById('user-list');
            userList.innerHTML = '';
            users.forEach(user => {
                const li = document.createElement('li');
                li.textContent = `${user.username} (${user.email})`;
                userList.appendChild(li);
            });
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="loadUsers()">Load Users</button>
    <ul id="user-list"></ul>
</body>
</html>

3.4 发送 POST 请求

以下示例演示了如何使用 fetch API 发送 POST 请求：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script>
        async function createUser() {
            const response = await fetch('http://127.0.0.1:8000/api/users/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: 'newuser',
                    email: 'newuser@example.com',
                    age: 20
                })
            });
            const user = await response.json();
            console.log('Created user:', user);
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="createUser()">Create User</button>
</body>
</html>

3.5 发送 PUT 请求

以下示例演示了如何使用 fetch API 发送 PUT 请求：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script>
        async function updateUser(userId) {
            const response = await fetch(`http://127.0.0.1:8000/api/users/${userId}/`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: 'updateduser',
                    email: 'updateduser@example.com',
                    age: 25
                })
            });
            const user = await response.json();
            console.log('Updated user:', user);
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="updateUser(1)">Update User</button>
</body>
</html>

3.6 发送 DELETE 请求

以下示例演示了如何使用 fetch API 发送 DELETE 请求：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script>
        async function deleteUser(userId) {
            const response = await fetch(`http://127.0.0.1:8000/api/users/${userId}/`, {
                method: 'DELETE'
            });
            if (response.status === 204) {
                console.log('Deleted user');
            }
        }
    </script>
</head>
<body>
    <h1>AJAX Example</h1>
    <button onclick="deleteUser(1)">Delete User</button>
</body>
</html>

总结

AJAX 和 RESTful API 是现代 Web 开发中常用的技术，通过它们可以实现前端与后端的异步通信。本文详细介绍了 AJAX 与 RESTful API 的基本概念及其使用方法，并提供了一些示例代码，包括使用 Django 创建 RESTful API 和使用 XMLHttpRequest 及 fetch API 进行 AJAX 请求。

I'mAlex
关注
专栏目录
用flask搭建Restful后端，与前端完成通信
IuSpet的博客
05-24 889
文章目录环境依赖准备工作编写API拿数据请求头中的数据url中的变量url中的参数post表单数据post json数据与前端通信 环境依赖 python flask flask_restplus restful风格插件 flask_cors 进行跨域回复 准备工作 app = Flask(__name__) # 24位随机数加密,用于cookies,可以用os.urandom(24)生成 app.config['SECRET_KEY'] = b'\xb4\xc58\xcb\xed\xa
服务端（原生 ajax、(RESTful api)、原生ajax、Jquery之Ajax）
weixin_48764743的博客
09-29 460
​ 一、接口开发规范(RESTful api) 什么是API?【了解】 API（Application Programming Interface，应用程序接口）是一些预先定义的接口（如函数、HTTP接口），或指软件系统不同组成部分衔接的约定 1.1 简介 RESTful规范，是目前一种比较流行的互联网软件设计规范。 这个规范约束的就是路由地址应该如何定义，返回的json接口数据应该如何规范。 什么是RESTful规范的 API？【重点】 它是在设计我们路由(API)的路径时同一个.
浅谈restful与ajax
m0_37166734的博客
03-16 5066
1.RESTFUL风格 最近在web的学习上学习了一个新内容,resuful风格，从字面意思上就可以看到知道是一种风格，由于标准是必须遵从的，所以它在这方面上又不是一种代码设计的标准，废话不多说，restful到底是什么呢？ 在网上看到了一句很能概括的话：URL定位资源，用HTTP动词（GET,POST,DELETE,put）描述操作。 从上面这张图中可以看到，GET和POST操作都是通...
python如何与前端交互
全栈开发的博客
07-11 1441
Python 与前端（如 HTML, CSS, JavaScript）的关联通常是通过 Web 框架来实现的，这些框架允许 Python 代码在服务器上运行，并与前端进行交互。
restful请求ajax,HTTP请求封装：Ajax与RESTful API
weixin_39669133的博客
08-05 624
一、HTTP请求HTTP即超文本传输协议，用以进行HTML 文件、 图片文件、 查询结果等的网络传输。一个完整的HTTP请求包括：请求行、请求头、空行和请求数据(请求数据可以为空)HTTP1.1标准请求方式有：GET, POST, PUT, HEAD, DELETE, CONNECT, TRACE, OPTIONS请求行和请求头里包含URL、Request Method、Accept、Cookie...
前端的RESTful API和后端的RESTful API
m0_57021623的博客
11-17 883
而前端的RESTful API通常是指在客户端（比如浏览器端、移动端应用）中调用后端RESTful API的方式和规范。前端的RESTful API通常是通过Ajax、Fetch API或者一些库（比如axios）来发起HTTP请求，按照RESTful规范与后端的API进行交互，包括发送GET、POST、PUT、DELETE等请求，处理返回的数据等。在实际开发中，前后端的工程师会根据约定好的API规范来进行协作，前端工程师会根据后端提供的API文档来调用后端的API，并将获取到的数据展示在用户界面上。
python前端调用后端模型_前端调用后端的方法(基于restful接口的mvc架构)
weixin_39726044的博客
12-11 1062
1.前端调用后台:建议用你熟悉的一门服务端程序，例如ASP,PHP,JSP,C#这些都可以，然后把需要的数据从数据库中获得，回传给客户端浏览器(其实一般就是写到HTML中，或者生成XML文件)然后在用JS获得。2.js只是前端的语言，它还没有访问数据库的能力。不过它可以向某个URL发送请求，并获得返回的数据。这个会用到Ajax技术。用AJAX，页面不刷新，只提交字符串到后台导入数据库通过纯Angu...
python后端知识点的自我复习
weixin_48609908的博客
12-09 2527
后端知识点 数据结构 Linux操作系统 计算机网络 mysql数据库 缓存redis web知识点 系统设计
vue怎么和python后端交互_vuejs前后端数据交互之从后端请求数据的实例
weixin_39747049的博客
12-20 2861
vuejs前后端数据交互之从后端请求数据的实例本文将向大家介绍一种用vue-resource从后端请求数据的方法。比如说从后端请求一张表过来，(1)首先，在data中return一个msg:[]数组来接收表的数据；(2)在方法中定义一个请求函数，比如我们这里函数名定义为showDetails；methods:{showDetails:function(){this.$http.get(baseUR...
大前端知识体系与面试宝典，从前端到后端，全栈工程师，六边形战士
11-21
对于后端开发，你需要掌握至少一种服务器端语言（如Node.js、Java、Python等），了解RESTful API设计，数据库（SQL与NoSQL）操作，以及安全性相关的知识，如防止SQL注入和XSS攻击。全栈开发要求对整个开发流程有全面...
FastAPI后端查询数据在前端进行分页展示（html、py文件）
04-23
在本项目中，我们主要探讨如何使用FastAPI作为后端框架与前端的LayUImini框架结合，实现在网页上对MySQL数据库中的数据进行分页显示。FastAPI是一款现代、高性能的Web API框架，它基于Python 3.6+，而LayUImini则是...
前后端分离实践: 使用Ajax与RESTful API进行数据交互
前后端分离的核心思想是将前端与后端分成两个独立的应用，通过API进行数据的交互。前端负责展示层的逻辑和交互，后端负责数据的处理和业务逻辑。这种分离使得前端和后端能够独立发展，提高了开发效率和团队之间的...
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1338
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 846
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
Vue根实例、实例总结
m0_54007573的博客
10-04 685
Vue根实例、实例总结
前后分离项目记录
最新发布
qq_25806839的博客
10-10 182
打包报错 Thread Loader时，增加以下代码： 上线，打包prod时:
一文区分SSTI 和 CSTI
zkaq7777777的博客
10-10 168
𝗦𝗲𝗿𝘃𝗲𝗿-𝘀𝗶𝗱𝗲 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗶𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 指可能发生使用服务器端模板引擎的 Web 应用程序。它涉及代码注入攻击，攻击者可以在服务器端模板中注入并执行恶意代码。𝗖𝗹𝗶𝗲𝗻𝘁 𝗦𝗶𝗱𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗜𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 是一个安全问题，攻击者的输入是注入页面并由客户端 JavaScript 库处理。TL;SSTI 允许在远程服务器上执行代码，而 CSTI 允许在受害者端【客户端】执行任意 JavaScript 代码。
html如何与后端交互
04-04
与后端交互需要使用其他技术，比如JavaScript、Ajax、PHP、Python等等。 下面是一些常见的与后端交互的方式： 1. 表单提交：通过表单提交数据到后端，后端进行处理并返回结果给前端页面。 2. Ajax请求：通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

I'mAlex

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值