Ajax异步提交form表单

学了一个周jquery，做了一堆脑瘫动画，终于能学到能用上的东西了！

几个注意点：

form控件默认为get传值，form控件中的按钮会冲突

为什么我要用ajax异步提交？

因为我想实现那种后端发送前端数据密码错误等类似的信息，这里就只需要提交一个用户名密码或者验证码等信息提交到后端，然后后端反馈登录信息。

HTML代码：

 <form class="login-form" action="" method="post">
            <h1>登录</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>或使用您的帐号</span>
{#                name和type的前后顺序是有关系的 必须name在前#}
                <input name="username" class="username" type="text"  placeholder="用户名">
                <input name="password" class="password" type="password"  placeholder="密码">
                <a href="#">忘记密码？</a>
                 <input type="button"  class="login-button"value="登录"/>

          </form>

注意点：此处按钮只能是input标签，不可以是<button>否则就会出现明明用了ajaxpost传值，实际上效果是get传值

JS代码

<script src="/static/js/jquery-1.10.1.js"></script>
<script>
    $(function() {
	$(".login-button").click(function() {
		login_user = $(".username").val();
		login_pass = $(".password").val();
		if (login_pass == "" || login_user == "") {
			alert("用户名或者密码不能为空!");
			return; //直接返回
		}
		console.log("用户名" + login_user);
		console.log("密码" + login_pass);
		var urls = "/user_login/" //接口地址
		$.ajax({
			url: urls,
			data: $('.login-form').serialize(),
			//将表单数据序列化，格式为name=value
			type: 'POST',
			dataType: 'json',
			success: function(data) {
				//success
				if (data.code == 200) {
					alert("登录成功");
                    location.href = "/login" //再次请求下login，此时会进入后端通过session判断登录状态 直接进首页
				} else if (data.code == 400) {
					alert("用户名或者密码错误");
				} else if (data.code == 301) {
					alert("用户未激活");
				}
			},
			error: function() {
				console.log("提交ajax函数异常");
				alert("异常错误")
			},

		});

	});
});
</script>

django 后端代码

def user_login(request):
    '''状态码 登录成功：200 密码错误：400 账户未激活：301 '''
    res = {"code": 200, "msg": ""}
    if request.method =='POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        print("用户名",username)
        print("密码",password)
        #验证用户名密码是否正确
        user = authenticate(username=username, password=password)
        if user:
            if user.is_active:
                #使用内置login函数登录 返回值：session, META, csrf_cookie_needs_reset
                login(request, user)
                #登录成功返回首页
                # return render(request,"index.html")
                ##2021年2月2日11:53:07 修改为ajax 登录成功返回code = 200
                res['code'] = 200 ;
                res['msg'] = "登录成功"
            else:
                #create_user 创建新用户的时候 is_active 默认是1，也就是True
                res['code'] = 301 ;
                res['msg'] = "账户未激活";
        else:
            res['code'] = 400 ;
            res['msg'] = "用户名或密码错误"
    elif request.method =='GET':
        return redirect("/login")#如果是get 就返回登录界面
    #In order to allow non-dict objects to be serialized set the safe parameter to False. 添加safe=False
    print(res);
    return JsonResponse(res,safe=False)

实现效果:
 

登录成功实现跳转