django admin 验证码点击刷新

django admin 验证码点击刷新

很多场景需要验证码功能，比如登录。我们可以直接使用django的第三方库 django-simple-captcha 模块来实现验证码功能，但是如果需要刷新验证码，还需要做一些操作才行。我们还是可以使用django的第三方库 django-simple-captcha 模块来实现验证码刷新功能。

url.py 文件

from django.urls import include
from captcha.views import captcha_refresh  # 验证码刷新功能，captcha_refresh为captcha.views内置方法，不需要我们单独写

urlpatterns = [
   path('admin/', admin.site.urls),
   path('login/', views.login),
   path('captcha/', include('captcha.urls')),  # 生成验证码
   path('refresh/', captcha_refresh),      # 点击可以刷新验证码

captcha.views 内置就有刷新验证码的方法，因此我们不必再自己去写了，非常方便。

模版文件（login.html）：

<!-- login.html -->
 
{#刷新验证码的脚本，放到body部分的最后面即可#}
<script>
        $('.captcha').click(function () {
            $.getJSON('/captcha/refresh/',function (result) {
                $('.captcha').attr('src',result['image_url']);
                $('#id_captcha_0').val(result['key']);
            });
        });
</script>

PS 报错 $ is not defined解决方式

html中没有引入jQuery.js文件
解决办法: 从官网下载并引入即可。

我下载的版本是jquery-3.6.0.js，不同版本有不同区别，根据需要下载。
官网链接
（注：打开链接后，找到自己想要的版本直接右击保存到电脑即可，不需要点开那个文件链接）

javaScript代码必须在jQuery.js文件之后。建议把jQuery.js文件放在所有JavaScript代码的前面，这样就不会出现这种错误了
示例

<!-- login.html -->
 
{#刷新验证码的脚本，放到body部分的最后面即可#}
<script type="text/javascript" src="{% static 'admin/simpleui-x/js/jquery-3.6.0.min.js' %}"></script>
<script type="text/javascript">
        $('.captcha').click(function () {
            $.getJSON('/captcha/refresh/',function (result) {
                $('.captcha').attr('src',result['image_url']);
                $('#id_captcha_0').val(result['key']);
            });
        });
</script>

最后验证码即可点击刷新