如何用ajax在django中增加一个like按钮？

要在Django中使用AJAX实现一个点赞按钮，你需要完成以下几个步骤：

基础概念

AJAX：Asynchronous JavaScript and XML，允许在不重新加载整个页面的情况下更新部分网页内容。
Django：一个高级的Python Web框架，鼓励快速开发和干净、实用的设计。

类型

GET请求：用于请求数据。
POST请求：用于提交数据到服务器。

应用场景

任何需要动态更新页面内容的场景，例如点赞、评论、投票等。

实现步骤

1. 创建Django视图

首先，你需要创建一个视图来处理点赞请求。

# views.py
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import Post

@csrf_exempt
def like_post(request):
    if request.method == 'POST':
        post_id = request.POST.get('post_id')
        post = Post.objects.get(id=post_id)
        post.likes += 1
        post.save()
        return JsonResponse({'likes': post.likes})
    return JsonResponse({'error': 'Invalid request'}, status=400)

2. 配置URL

接下来，你需要配置URL来映射到这个视图。

# urls.py
from django.urls import path
from .views import like_post

urlpatterns = [
    path('like/', like_post, name='like_post'),
]

3. 创建前端模板

在你的HTML模板中，添加一个点赞按钮，并使用AJAX来处理点击事件。

<!-- templates/post_detail.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Post Detail</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>{{ post.title }}</h1>
    <p>Likes: {{ post.likes }}</p>
    <button id="like-btn">Like</button>

    <script>
        $(document).ready(function() {
            $('#like-btn').click(function() {
                var postId = {{ post.id }};
                $.ajax({
                    type: 'POST',
                    url: '{% url "like_post" %}',
                    data: {
                        'post_id': postId,
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    },
                    success: function(response) {
                        $('#like-btn').text('Liked');
                        $('p').text('Likes: ' + response.likes);
                    },
                    error: function(response) {
                        alert('Error: ' + response.responseJSON.error);
                    }
                });
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

1. CSRF Token问题

Django默认启用了CSRF保护，因此你需要在AJAX请求中包含CSRF token。

data: {
    'post_id': postId,
    'csrfmiddlewaretoken': '{{ csrf_token }}'
}

2. 请求失败

确保你的URL配置正确，并且视图函数能够正确处理请求。

3. 数据库更新失败

确保你的模型定义正确，并且有相应的字段（例如likes）。

参考链接

通过以上步骤，你可以在Django中使用AJAX实现一个点赞按钮。希望这对你有帮助！

相关·内容

django--ajax的使用,应用

Django 中使用 ajax 请求的正确姿势

我的博客在导航栏中有一个在线工具跳转，博客中提供了一些比较实用的在线工具，最近两天又添加了一个在线工具，作用是可以查询 docker 官方镜像仓库中指定镜像的版本信息，虽然之前写在线工具的时候就已经掌握了 django + jQuery ajax 的用法，但经过这次的工具更新，我对 ajax 的用法又有了更深层次的理解，所以分享一下我的使用经验。

Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器

AJAX（Asynchronous Javascript And XML 异步的Javascript和XML）

Ajax与jQuery异步加载数据

一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

Django1.7+JQuery+Ajax集成小例子

Ajax的出现让Web展现了更新的活力，基本所有的语言，都动态支持Ajax与起服务端进行通信，并在页面实现无刷新动态交互。下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时，用户名存在不存在的一个小应用。注意，验证存在不存在使用的是Ajax的方式，不用让用户点击按钮验证是否存在。页面HTML代码如下： Html代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

010

Python进阶30-Django AJAX

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

Htmx意外走红，我们从React“退回去”后：代码行数减少 67%，JS 依赖项从 255 下降到 9

编译｜核子可乐、Tina 技术和软件开发领域存在一种有趣的现象，就是同样的模式迭起兴衰、周而复始。 htmx 的走红过去Web非常简单。URL 指向服务器，服务器将数据混合成 html，然后在浏览器上呈现该响应。围绕这种简单范式，诞生了各种Javascript框架，以前可能需要数月时间完成的一个应用程序基本功能，现在借助这些框架创建相对复杂的项目却只需要数小时，我们节省了很多时间，从而可以将更多精力花在业务逻辑和应用程序设计上。但随着 Web 不断地发展，Javascript 失控了。不知何故，我们

网站功能——添加文章编辑页面，支持 markdown 编辑器实时预览编辑

经常会有使用我博客源码搭建好网站的人问我为啥后台文章编辑页面没有富文本编辑器也没有支持 markdown 编辑，不方便预览。其实之前我也回答过很多次，在创建文章的时候，其实随便找个 markdown 编辑器创建好然后复制进去就行。

Django项目实战之用户头像上传与访问

1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post" enctype="multipart/form-data"> {% csrf_token %}

用户名:<input type="text" name="username">

从0开始做系统之传递数据

我们做系统，光有后台不行，还得有好看和便利的前台来操作和展示信息。前端一般是用html5和JS来控制。如果好看，你还得懂css。后台控制数据和逻辑，前台控制交互和展示。所以前后台得通信，交换信息。这里就是讲他们如何传递数据的。市面上的系统一般的架构都是MVC的，M指的是model,数据库这层。V是view，界面这层，C是控制逻辑这层。如果我们打开一个网页，请求网址后，它会去C这层，去哪个路由，要什么样的业务逻辑，展现到哪个页面，都是由这层控制。先去M里面拿取数据，然后渲染到V这层，最终面对的是用户。

Django CSRF认证的几种解决方案

浏览器在发送请求的时候，会自动带上当前域名对应的cookie内容，发送给服务端，不管这个请求是来源A网站还是其它网站，只要请求的是A网站的链接，就会带上A网站的cookie。浏览器的同源策略并不能阻止CSRF攻击，因为浏览器不会停止js发送请求到服务端，只是在必要的时候拦截了响应的内容。或者说浏览器收到响应之前它不知道该不该拒绝。

Python自动化开发学习20-Djan

下面就从创建项目开始，一步一步先做一个页面出来。一、先创建一个新的Django项目项目名是：week20，App名是：app01

零基础使用Django2.0.1打造在线教育网站（十七）：我要学习配置

努力与运动兼备～~~有任何问题可以加我好友或者关注微信公众号，欢迎交流，我们一起进步！

Python进阶34-Django 中间件

Django实现收藏功能

我的 Django 项目里的用户可以发图片。我想实现一个收藏功能，就是用户可以收藏其他用户发布的图片。粗略想了下，model应该这样写：

011：Django高级表单

本章知识点 1、Django表单类 2、自定义文件上传 3、Ajax post数据

python3.6+django2.0 一小时学会开发一套学员管理系统demo

1.在pycharm中新建project demo1 添加app01 点击create按钮完成新建 2.在demo项目目录下新建目录static，并在settings.py中追加代码： STATICFILES_DIRS=(os.path.join(BASE_DIR, 'static'),) 3.在setting.py中添加模板路径： TEMPLATES = [ { 'BACKEND': '...', 'DIRS': [os.path.join(BASE_DIR,

Django评论库

查了一下，Django原本会自带一个评论库组件，而从1.6版本以后就没有自带了，需要自己安装。

django中的ajax组件教程详解

Ajax(Asynchronous Javascript And XML)翻译成英文就是“异步Javascript和XML”。即用Javascript语言与服务器进行异步交互，传输的数据为XML，（现在使用更多的是json数据）。

教你玩转Vue和Django的前后端分离

今天中秋节，先祝大家节日愉快，不在父母身边的都打个电话关心一下吧，我们最容易忽略的人恰恰是最爱我们的父母。

解决django中form表单设置action后无法回到原页面的问题

django中form表单设置action后，点提交按钮是跳转到action页面的，比如设置action为login，网址为192.168.1.128，跳转后便会来到192.168.1.128/login，F5刷新也会是重新提交表单对话框，无法回到原页面。

django 之跨域访问问题解决 access-control-allow-origin

Django操作接口集删除（十三）

今天是删除接口集的操作，删除的话可以做成物理删除和逻辑删除。由于数据有可能需要被找回，所以采用的是逻辑删除。首先是删除的JavaScript代码

Hcode网站的搭建日记（四）Ajax实现阅读量统计

在静态网页可以不刷新重载网页实现以下功能，特别是有设置缓存的静态网站，可以动态执行所需要的更新，避免一些不必要资源的再次加载，可以增加浏览器的访问速度，增加客户浏览体验度。 Ajax技术的一些运用实例如下：

CSRF 跨站请求伪造

CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比，CSRF攻击往往不大流行（因此对其进行防范的资源也相当稀少）和难以防范，所以被认为比XSS更具危险性

接口测试平台代码实现1:环境和所需技术

本节主要是要介绍下，做一个这样的测试平台，都需要提取掌握哪些技术呢？还没掌握的可以在看完本节之后，去好好学习一下相关技术。本公众号会用直白的土话给您讲讲，并不是百度百科那种晦涩难懂的定义哈。

django 通过ajax完成邮箱用户注册、激活账号

一、图片验证码 django-simple-captcha配置 1.在pycharm中，File====》Settings====》Project:项目名====》Project Interpreter====》+====》搜django-simple-captcha　　选择0.55以上版本，然后点install package 按钮进行安装 2.项目名/urls.py中添加代码： from django.urls import path,include ...... from users.views i

Django快速入门——投票程序(4，6)表单&界面、风格

我们更新一下在上一个教程中编写的投票详细页面的模板 ("polls/detail.html") ，让它包含一个 HTML <form> 元素(即表单)

Django MVT之V

在Django MVC概述和开发流程中已经讲解了Django的MVT开发流程，本文重点对MVT中的视图(View)进行重点讲解。

如何用Python做Web开发？——Django环境配置

用Python做Web开发，Django框架是个非常好的起点。如何从零开始，配置好Django开发环境呢？本文带你一步步无痛上手。

30.Django CSRF 中间件

CSRF 1.概述　　CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲，某个恶意的网站上有一个指向你的网站的链接，如果某个用户已经登录到你的网站上了，那么当这个用户点击这个恶意网站上的那个链接时，就会向你的网站发来一个请求，你的网站会以为这个请求是用户自己发来的，其实呢，这个请求是那个恶意网站伪造的。　　为了避免上面情况的出现，Django引用了CSRF防护机制；Django第一次响应来自某个客户端的请求时，会在服务器端随机生成一个 token，并把这个 tok

Django教程（二）- Django视图与网址进阶1. HTML表单2.CSRF3.代码操作

HTML 表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:

Django 2.1.7 视图 - HttpResponse对象、子类JsonResponse、子类HttpResponseRedirect

视图在接收请求并处理后，必须返回HttpResponse对象或子对象。在django.http模块中定义了HttpResponse对象的API。HttpRequest对象由Django创建，HttpResponse对象由开发人员创建。

利用 Django 动态展示 Pyecharts 图表数据的几种方法

本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法!

09.Django基础七之Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

Django使用JQuery实现Ajax请求

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。也就是在不重新加载整个页面的情况下，浏览器可以与服务器交换数据并更新部分网页内容，大大提升用户的体验。例如在百度输入框中输入一个关键字，会通过ajax请求数据返回内容；新浪微博的点赞等都用到了Ajax技术。

【python】【Djang】GPS/北斗串口数据实时定位百度地图

本项目为从串口读取GPS/北斗设备接收数据，进行处理后使用百度地图api实时显示定位。

django机构收藏功能实现

Django2.0.8+xadmin2实现在线学习网站，课程、讲师、机构、用户收藏功能。GitHub地址：https://github.com/xyliurui/OnlineLearningPlatform ；Django版本：2.0.8

【玩转腾讯云】django 开发Bug追踪平台之用户注册篇（基于腾讯云短信 & redis）

项目预览 👉 Bug追踪平台【云短信买不起了，可通过手机号：18203503747 密码：ruochen666 登入体验】项目gitee地址 👉 saas 本篇教程对应代码为【注册验证码处理】提交，可通过对应分支查看用户注册篇首先，总体的思维导图如下： [watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,siz

学校电量余额提醒系统——耗时三天肝了一个学校电量余额查询及提醒系统

用的是Django，不得不说，Django里面的ORM比fastapi的舒服多了，为所欲为。

极验验证demo（django+vue）原

偶然翻看博客，发现有人介绍geetest，看了一下感觉上手比较容易，sui遂注册使用。

【Python全栈100天学习笔记】Day47 Django中间件使用

我们继续来完善投票应用。在上一个章节中，我们在用户登录成功后通过session保留了用户信息，接下来我们可以应用做一些调整，要求在为老师投票时必须要先登录，登录过的用户可以投票，否则就将用户引导到登录页面，为此我们可以这样修改视图函数。

django xadmin 集成DjangoUeditor富文本编辑器

本文档记录自己的学习历程！介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题 Ueditor下载地址 https://github.com/wsqy/DjangoUeditor.git 解压后将 DjangoUeditor 文件夹复制到django项目目录下，跟app目录同级修改app models 导入UEditorField 模块增加需要富文本框的字段 from DjangoUeditor.models import UEd

Django的csrf防御机制

Html页面的表单没有完全使用Django的form进行渲染，故Js不能使用$('#ClassID').serialize()来获取Csrf和Data，然后报错CSRF token missing or incorrect.

测试开发之创建你的第一个Django项目（一）

为了使得代码管理更加方便，如果你不打算同步的话，可以直接跳到第二大步——创建django项目

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云