jQuery中ajax异步请求

ajax的异步请求

<form action="login" method="post">
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" required>
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
    </div>
    <p>
    <button type="submit" class="btn btn-primary btn-block">登录</button>
    </p>
</form>

js代码块

<script>
    // 点击提交按钮，ajax发送；验证成功，通过location.href = url来跳转
    $('form').submit(function(e){
        e.preventDefault();  //阻止默认提交
        var username = $("[name='username']").val(); // 注意，jquery筛选一定加引号，否则报错uncaught
        var password = $("[name='password']").val();
        $.ajax({
            url: "/login",//请求路径
            type: "POST",//请求方式
            data: {//传递参数
                "username": username,
                "password": password,
            },
            success: function(res) {  //成功回调函数--res是响应结果
                response = JSON.parse(res); //将json字符串解析为json对象（即JS对象）
                if (response['errors']) {
                    console.log(response['errors']);
                    } else {
                        location.href = "/index/";  //跳转至首页
                    }
</script>

后端

def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password') 
        //如果前端发来的data中key对应的value是列表，要用getlist(key)来获取
        ajax_response = {'user': None, "errors": ""}
        if username == 'egon' and password == '123':
            ajax_response['user']='egon'
        else:
            ajax_response['errors']='用户名或密码错误'
        return HttpResponse(json.dumps(ajax_response))
    if request.method == 'GET':
        return render(request, 'login.html')