Django在同一個視圖中要處理ajax請求遇到的一些坑

在寫項目中遇到的一些ajax的坑，在這裡做一下記錄

一、先放一個完整的前，後端示例

<!-- 使用者登入 -->
<div id="login" class="layout_login">
    <div class="layout_login_" id="login_b">
        <div class="layout_login_title">
            使用者登入
        </div>
        <div id="error_msg_login" style="color: red; text-align: center"></div>
        <form id="loginForm">
            <div class="layout_login_input">
                <input type="text" name="username" id="id_username_login" placeholder="賬号" class="input_"/>
                <input type="password" name="password" id="id_password_login" placeholder="密碼" class="input_"/>
                <input type="text" name="checkcode_login" id="id_checkcode_login" placeholder="驗證碼"
                       class="layout_login_input_checkcode" style="float: left;"/><img
                    src="{% url 'demo_app:getcode' %}" class="checkCode" style="float: right;"
                    onclick="changeCheckCode(this)">
                <script type="text/javascript">
                    //圖檔點選事件
                    function changeCheckCode(img) {
                        img.src = "{% url 'demo_app:getcode' %}?time=" + new Date().getTime();
                    }
                </script>
            </div>
            <input type="button" value="登入" class="layout_login_btn" id="login-form">
        </form>
        <div class="layout_login_url" id="onreg1">
            沒有賬号？去注冊>>
        </div>
    </div>
</div>
           

$("#login-form").click(function () {
        //1.發送資料到伺服器
        if (checkUsername_login() && checkPassword_login() && checkCheckcode_login()) {
            //校驗通過，發送ajax請求，送出表單的資料
            $.post("login", $("#loginForm").serialize(), function (data) {
                //處理伺服器響應的資料   data {flag:true,errorMsg:"登入失敗！"}
                if (data.code === 1) {
                    console.log("登入成功!");
                    //登入成功，跳轉成功頁面
                    location.href = "index";

                } else {
                    //登入失敗，給errorMsg添加提示資訊
                    console.log("登入失敗!")
                    $("#error_msg_login").empty();
                    $("#error_msg_login").append(data.msg);

                }
            });
        } else {
        }
        //2.跳轉頁面
        return false;
    });
           

views的ajax接受方法

def State(request):
    """
        擷取使用者登入狀态函數，通過session實作
    """
        
    if request.method == 'GET':
        ...
 
    #要注意Ajax處理要放在中間
    if request.is_ajax():
        ...
        return JsonResponse({'res':'成功'})
 
 
    if request.method == 'POST':
        ...
 
    

#如果是類視圖
 
class K (View):
    def get(self,request):
        if self.request.is_ajax:
            pass
        else:
            pass
 
    def post(self,request):
        if self.request.is_ajax:
            pass
        else:
            pass
    
    
           

二、button，type = "submit" 和 Ajax 不能同時使用，否則Ajax調用不成功

button按鈕的type屬性的預設值是submit，有送出form表單的功能。換成span标簽可行，但是還要改樣式，直接更改button的type為button

<button>點我送出</button> →  <button type="button">點我送出</button>