下面是一个 ajax 检测用户名是否可用的例子。
django 项目中。
—— views.py 里—— from django.shortcuts import render,HttpResponse from django.views.decorators.csrf import ensure_csrf_cookie from app01 import models from django.http import JsonResponse @ensure_csrf_cookie def reg(request): # 注册 return render(request,'reg.html') def check(request): # 检测用户名是否可用 user = request.POST.get('user') ret = models.User.objects.filter(name=user) if ret: return JsonResponse({'status':1,'msg':'用户名已存在'}) else: return JsonResponse({'status':0,'msg':'可用的用户名'})
—— reg.html 里—— <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>reg</title> </head> <body> <p>用户名 <input type="text" name="user"><span></span></p> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="/static/js/ajax_setup.js"></script> <script> $('[name="user"]').blur(function () { _this = $(this); {#alert($('[name = "user"]').val());#} $.ajax({ url: '/check/', type: 'post', data: { user: $('[name="user"]').val(), {#属性选择器#} }, success: function (res) { _this.next().text(res.msg) } }) }).focus(function () { _this.next().text('') }); {#链式操作#} </script> </body> </html>
另一种Js 代码:
<script>
$('[name="user"]').blur(function () {
$.ajax({
url: '/check/',
type: 'post',
data: {'user': $('[name="user"]').val()},
success: (res) => { #箭头的使用
$(this).next().text(res.msg)
}
})
}).focus(function () {
$(this).next().text('')
})
</script>
其他:
-- models.py -- from django.db import models class User(models.Model): name = models.CharField(max_length=22) # varchar -------------------------------------------
-- urls.py -- from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^reg/', views.reg), url(r'^check/', views.check),] -------------------------------------------
-- settings.py --
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static')]
