運用Django、MySQL、HTML、JS、Ajax模擬開發博客系統（1）

時間 2019-11-24

標籤運用 django mysql html ajax 模擬開發博客系統欄目 Python 简体版

原文原文鏈接

開發環境：django 2.0.2 工具爲pycharmjavascript

首先建立一個django項目名爲blog 第一個程序名爲BlogUserhtml

建立完成以後須要在templates下新建一個名爲register.html的文件java

重複上步操做在新建一個名爲welcome.html文件，用於登錄成功後的歡迎界面
在register.html文件內寫入以下代碼，可在瀏覽器內呈現簡單的登陸註冊頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
    <script>
        $(function (){
            $("input[name='username']").blur(function () {
               //alert("")
                uname=$("input [name='username']").val()
                CSRF=$("input[name='csrfmiddlewaretoken']").val()
                $.ajax({
                    url:'/BlogUser/getUser',
                data:{'uname':uname,'csrfmiddlewaretoken':CSRF},
                    type:'POST',
                    success:function (dat) {
                        if (dat=='True'){
                            $("span").html("用戶名已存在")
                            }
                        else{
                            $("span").html("用戶名能夠使用")
                            }
                    }

                });
            });
        });
    </script>
</head>
<body>
<h1>歡迎註冊</h1>
<form action="/BlogUser/register" method="post">
    {% csrf_token %}
    用戶名：<input type="text" name="username" value="{{ username }}">
            <span>{{ error }}</span>
    <br>
    密  碼：<input type="password" name="pwd"><br>
{#    性  別：<input type="radio" name="sex" value="女" checked>女#}
{#            <input type="radio" name="sex" value="男">男<br>#}
{#    愛  好：<input type="checkbox" name="likes" value="籃球">籃球#}
{#            <input type="checkbox" name="likes" value="足球">足球#}
{#            <input type="checkbox" name="likes" value="乒乓球">乒乓球<br>#}
{#    地址：#}
{#        <select>#}
{#            <option value="北京">北京</option>#}
{#            <option value="上海">上海</option>#}
{#            <option value="廣州">廣州</option>#}
{#            <option value="深圳">深圳</option>#}
{#        </select>#}
{#    <br>#}
    <input type="submit" value="註冊">
    </form>
</body>
</html>