需求：使用AJAX 做一个注册登录示例， 如用户名已存在， 在填写用户名时给与提示。

1:首先创建一个新的django项目。做好配置

在settings.py文件里做好数据库配置：

1. 告诉Django连接那个数据库

            DATABASES = {

                'default': {

                    'ENGINE': 'django.db.backends.mysql',

                    'NAME': 'day30',

                    'HOST': '127.0.0.1',

                    'PORT': 3306,

                    'USER': 'root',

                    'PASSWORD': '123',

                }

            }
2.在settings同目录下的 __init__.py文件导入pymysql:
import pymysql
pymysql.install_as_MySQLdb()

3.后面的html文件会用到bootstrap，和setAjax 所以需要在settings.py文件中配置路径：　
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

url 中的代码：

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^register/', views.register),

    url(r'^check_name/', views.check_name),

    url(r'^login/', views.login),

]

url中代码

views中代码：

from django.shortcuts import render, redirect

from app01 import models

from django.http import JsonResponse

# Create your views here.

def register(request):

    return render(request, "register.html")

def check_name(request):

    if request.method == "POST":

        ret = {"code": 0}

        username = request.POST.get("name")

        # 去数据库中查询是否有这个username对应的数据

        is_exist = models.User.objects.filter(name=username)

        if is_exist:

            # 数据库中有这个用户名对应的数据

            # 这个用户名已经存在不能再使用

            ret = {"code": 1, "errMsg": "用户名已存在！"}

        return JsonResponse(ret)

def login(request):

    if request.method == "POST":

        ret = {"code": 0}

        name = request.POST.get("name")

        pwd = request.POST.get("pwd")

        ok = models.User.objects.filter(name=name, pwd=pwd)

        if not ok:

            ret["code"] = 1

            ret["data"] = "用户名或密码错误"

        else:

            ret["data"] = "http://www.luffycity.com"

        return JsonResponse(ret)

    return render(request, "login.html")

views中代码

register.html中代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>register</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        .error {

            color: red;

        }

    </style>

</head>

<body>

<p>

    用户名：<input type="text" id="i1">

    <span class="error" id="s1"></span>

</p>

<p>

    密码：<input type="password" id="i2">

</p>

<p>

    <button id="b1">注册</button>

</p>

<script src="/static/jquery-3.3.1.min.js"></script>

<script src="/static/setupAjax.js"></script>

<script>

    $("#i1").on("input", function () {

        $("#s1").text("");

        // 只要i1这个标签失去焦点，我就要 把用户填写的值 往后端发送AJAX请求

        var value = $(this).val();

        $.ajax({

            url: "/check_name/",

            type: "POST",

            data: {name: value},

            success:function (data) {

                console.log(data);

                if (data.code){

                    // 用户名已存在！

                    $("#s1").text(data.errMsg);

                }

            }

        })

    })

</script>

</body>

</html>

register代码

login.html中代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<p>

    用户名：<input type="text" id="i1">

    <span class="error" id="s1"></span>

</p>

<p>

    密码：<input type="password" id="i2">

</p>

<p>

    <button id="b1">登录</button>

</p>

<script src="/static/jquery-3.3.1.min.js"></script>

<script src="/static/setupAjax.js"></script>

<script>

    $("#b1").click(function () {

        var name = $("#i1").val();

        var pwd = $("#i2").val();

        $.ajax({

            url: "/login/",

            type: "POST",

            data: {name: name, pwd: pwd},

            success:function (data) {

                if (!data.code){

                    // 登陆成功

                    location.href = data.data;

                }

            }

        })

    })

</script>

</body>

</html>

login.html 代码

models中代码：

from django.db import models

# Create your models here.

class User(models.Model):

    name = models.CharField(max_length=32)

    pwd = models.CharField(max_length=128)

其中static 中的文件如下：

数据库里：填上几条数据， 用以验证

使用ajax 做注册登录示例，的更多相关文章

  1. 2.1博客系统 |基于form组件和Ajax实现注册登录

    基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...

  2. python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  3. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  4. 今天发现之前瑞乐做的登录和注册居然都是用的get请求,瞬间出了一身冷汗.

    今天发现之前瑞乐做的登录和注册居然都是用的get请求,瞬间出了一身冷汗. 然后迅速的让晓勇改成post请求了. 不然我觉得凡是有点抓包能力的人抓到我们登录和注册这么涉及安全的东西居然用的是get请求, ...

  5. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  6. ajax 做登录 实现页面免刷新

    结合之前学的知识,可以用ajax来传递数据,实现页面不用刷新,仅数据刷新,来看一下ajax是怎么来实现页面免刷新的 方的是客户端,圆的是服务器 如果没有ajax的话,客户端直接把数据传给服务器,服务器 ...

  7. 手把手教做单点登录（SSO）系列之一：概述与示例

    本系列将由浅入深的结合示例.源码以及演示视频,手把手的带大家深入最新的单点登录SSO方案选型与架构开发实战.文末附5个满足不同单点登录场景的gif动画演示(如果看不清请在图片上右键用新窗口打开),本系 ...

  8. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  9. 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

随机推荐

  1. Win7打开新的文件夹总会以新窗口的形式打开

    首先可以在 组织-->文件夹和搜索选项   中设置“在同一窗口中打开每个文件夹” 如果设置后不起作用还可以 管理员方式执行以下两条命令 在开始菜单-运行中输入regsvr32 "%Sy ...

  2. asp.net ajax实现md5加密

    1. [图片] asp.net ajax 效果截图.png 2. [代码]前端代码HTML/Javascript/jQuery <!DOCTYPE html PUBLIC "-//W3 ...

  3. webpack 教程资源目录

    初级教程 webpack-howto 作者:Pete HuntWebpack 入门指迷 作者:题叶 webpack-demos 作者:ruanyf一小时包教会 —— webpack 入门指南 作者:V ...

  4. HTML5 canvas save()和restore()方法讲解

    我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的.第一步是用默认设置画一个大四方形,然后保存一下状态.改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态.再次改变填充颜色 ...

  5. django1.8.3搭建博客——2 django web 开发指南阅读笔记

    一.    django框架 1 .http封装web服务的整个过程.由请求(request)和响应(response)两部分组成. 请求的内容为URL (指向文档的路径). 响应主要为正文(body ...

  6. Winform中的dataGridView添加自动编号

    1.Winform中的dataGridView添加自动编号:http://blog.csdn.net/ohyoyo2014/article/details/38346887 2.如何为datagrid ...

  7. 全面解析Bootstrap手风琴效果

    触发手风琴可以通过自定义的data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步:设计一个面 ...

  8. Struts2 - 通过 ActionContext 访问 Web 资源

    public String execute(){ //0. 获取 ActionContext 对象 //ActionContext 是 Action 的上下文对象. 可以从中获取到当往 Action ...

  9. 机器学习 Support Vector Machines 2

    优化的边界分类器 上一讲里我们介绍了函数边界和几何边界的概念,给定一组训练样本,如果能够找到一条决策边界,能够使得几何边界尽可能地大,这将使分类器可以很可靠地预测训练样本,特别地,这可以让分类器用一个 ...

  10. freeMarker（十三）——XML处理指南之揭示XML文档

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 前言 尽管 FreeMarker 最初被设计用作Web页面的模板引擎, ...