ajax失去焦点练习

所需文件

复制代码
"""homework URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views import View


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^reg/',views.reg),
    url(r'^check/',views.check),


]
urls.py文件
复制代码
复制代码
from django.shortcuts import render,HttpResponse,redirect
from app01.models import *

# Create your views here.


def reg(request):
    if request.method=='POST':
        pass
    return render(request,'reg.html')


def check(request):
    username=request.POST.get('username')
    ret=Account.objects.filter(name=username)
    if ret:
         return HttpResponse('该用户名已注册')
    else:
        return HttpResponse('用户名可用')
views.py
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-2">
            <form action="" method="post">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="用户名">
                    <span id="username_span" class="username_span"></span>
                </div>

                <button type="button" class="btn btn-primary" id="btn_submit">登录</button>
            </form>
            <script src="/static/jquery-3.2.1.min.js"></script>
            <script src="/static/bootstrap/js/bootstrap.js"></script>
            <script src="/static/init_ajax.js"></script>
            <script>

                $('#username').on('blur', function () {
                    var $username=$('#username').val();
                    var $spanElement=$('#username_span')
                    {#var $username = $(this).val();#}
                    {#var $spanElement = $(this).next();#}
                    $.ajax({
                        url: '/check/',
                        type: 'post',
                        data: {'username': $username},
                        success: function (arg) {
                            $spanElement.text(arg);


                        }


                    })

                })
            </script>

        </div>
    </div>
</div>
</body>
</html>
html文件
复制代码

需要引用的插件：

复制代码
// 从COokie取CSRF TOKEN的值
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');


// 将CSRF TOKEN值 设置到AJAX的请求头中，后续的AJAX请求就会自动携带这个CSRF TOKEN
function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});
ajax_csrfToken.js
复制代码

 

posted @   强仔必胜  阅读(161)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示