javascript - 将变量从javascript传递到django View

Question

我正在使用一些 css 动画等创建简单的“石头剪刀布”游戏，其中大部分内容都是在 javascript 中发生的，因为学习 JS 是我目前主要关注的事情。

用户与计算机匹配也发生在 javascript 中。比赛结束后，我将用户获得的 exp(points) 分配给新变量。

我现在要做的是将该数据(获得的 exp)发送到 View ，以便我可以将其保存回数据库(users.exp)。

如果我是对的，我认为 jQuery ajax 或 fetch api 应该这样做，但经过几个小时的尝试，我可能就是不明白。

Any1 可以给我一些提示，解释吗？请不仅仅是解决方案。

观点:

@login_required
def profile(request):
    if request.user.is_authenticated:
        user = request.user  
        userObj = Profile.objects.filter(user=user)

        usersLevel = userObj[0].level
        usersPoints = userObj[0].points
        context = { 
            'usersLevel': usersLevel,
            'usersPoints': usersPoints,
        }   
        return render(request, 'rps_app/game.html', context)

    else:
        print('No user logged in!')
        return render(request, 'rps_app/game.html')

这是我加载用户数据的模板:

<script type="text/javascript"> 
        var usersLevel = '{{usersLevel|safe}}';
        var usersPoints = '{{usersPoints|safe}}';
</script>

js:

let users_level = Number(usersLevel);
let users_points = Number(usersPoints);
progressbar.style.width = `${users_points}%`;
...

JavaScript:

$(document).ready(function(){
    $('#btn-ajax').click(function(){
        $.ajax({
            url: 'http://127.0.0.1:8000/game',
            csrfmiddlewaretoken: "{{ csrf_token }}",
            type: 'get', 

            success: function(data) {
                console.log(data);
                alert(data);
            },
            failure: function(data) { 
                alert('Your code is crap mate');
            }
        }); 
    });
})

************ 。编辑。 ***********

这就是我现在得到的:

js:

$(document).ready(function(){
    $('#btn-ajax').click(function(){
        $.ajax({
            url: 'http://127.0.0.1:8000/test/earned_exp=100/',
            csrfmiddlewaretoken: "{{ csrf_token }}",
            success: function(data) {
                alert('succes');
            },
            failure: function(data) { 
                alert('Your code is crap mate');
}}); });})

views:

def pass_variable(request, earned_exp=None):

    some_variable = request.GET.get('earned_exp')
    console.log(some_variable)

    return HttpResponse('<h1>ok.{}</h1>'.format(earned_exp))

url:

path('test/<earned_exp>/', user_views.pass_variable, name='pass_variable'),

Answer 1

您可以将变量作为 URL 参数传递并通过请求对象获取它们。

$.ajax({
    url: 'mycoolwebsite.com/path/?earned_xp=100'
    success: function(e){
       alert("success");          
    },  
    error: function(e){
       alert("error")
    }   
});


class MyView(View):
    def get(self, request):
       xp = request.GET.get("earned_xp")
       # do whatever you want with the XP now.

如果你想发送多个 URL 参数，你可以用 & 将它们分开，这是一个示例 url

https://example.com/ ?hello=world&goodbye=coding