JQuery/Django 语法错误

Question

我知道我遗漏了一些愚蠢的错误。 Pycharm/Brackets 没能帮上忙，我已经梳理了十几遍了。

这个想法是，当有人点击预订槽(slot)时，他们可以保留它，清除它，或者因为有人已经拥有它而被阻止。第 41 行返回的错误为 "SyntaxError:missing : after property id"，即 "console.log()"。我一直在阅读，这可能是其他地方的语法错误，但我被难住了。

#views.py
@ensure_csrf_cookie
def reserve(request):
    if request.is_ajax():
        pk = request.POST['pk']
        slot = Event.objects.get(pk=pk)
        user = request.user
        if slot.is_reserved == True:
            if user == slot.teacher:
                slot.is_reserved = False
                slot.teacher = None
                slot.save()
                result = "clear"
            else:
                result = "blocked"
        else:
            slot.is_reserved = True
            slot.teacher = user
            slot.save()
            result = "reserved"
    result = {'result': result}
    return HttpResponse(json.dumps(result, cls=DjangoJSONEncoder))

//main.js
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            // Only send the token to relative URLs i.e. locally.
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    }
});
$(document).ready(function () {
    console.log('ready!'); //Sanity check
    var count = 0; //Set Count
    $('button').click(function () {
        console.log('we clicked!'); // Sanity Check II
        event.preventDefault();
        var pk = this.id
        var user = $('button').attr("user")
        count++ //Increase the count towards reload
        console.log(pk, user) // Sanity Check III
        $.ajax({
            url: "/reserve/",
            type: "POST", //Send the info to reserve view
            data: {
                pk: pk
            },
            dataType: "json",
            console.log('form submitted') // Sanity check IV (I may have a problem)
            success: function (result) {
                if (result.result == 'clear') {
                    $(this).toggleClass("free reserved");
                    $.toast({
                        heading: "Reservation Clear!",
                        icon: 'success',
                        stack: 4,
                        hideAfter: 2000,
                        bgColor: '#003366',
                    });
                };
                if (result.result == 'reserved') {
                    $("div.tchr").html(user); //Send user info to button, reverts on refresh
                    $(this).toggleClass("free reserved");
                    $.toast({
                        heading: "Reservation Complete!",
                        icon: 'success',
                        stack: 4,
                        hideAfter: 2000,
                    });
                };
                if (result.result == 'blocked') {
                    alert("This slot is already reserved! Maybe refresh your browser?")
                };
            };
        });
        if (count > 4) {
            var count = 0
            $('#main_view').load(document.URL + ' #main_view'); //Reload if the count hits four
        }
    });
});
//End button function

$(document).ready(function () {
    console.log('ready!'); //Sanity check
    $('#toggle').click(function () {
        var $this = $(this);
        console.log('we clicked!');
        $('#main_view').toggle('500');
        $('#my_view').toggle('500');
        $this.toggleClass('one');
        if ($this.hasClass('one')) {
            $this.text('My Reservations');
        } else {
            $this.text('Today');
        }
    });

});

Answer 1

如果你删除下面标记的行，它肯定会起作用。在 ajax 的参数字典中，您放置的 console.log 是完全错误的。

$.ajax({
            url: "/reserve/",
            type: "POST", //Send the info to reserve view
            data: {
                pk: pk
            },
            dataType: "json",
            console.log('form submitted') <-- remove this line
            success: function (result) {
                if (result.result == 'clear') {
                    $(this).toggleClass("free reserved");
                    $.toast({
                        heading: "Reservation Clear!",
                        icon: 'success',
                        stack: 4,
                        hideAfter: 2000,
                        bgColor: '#003366',
                    });
                };

注意:如果你想调试你的代码，那么你可以在 ajax 中放置一个类似 beforesend 的函数，这将有助于调试你传递的任何内容或你的 js 代码流。