Javascript （Django/HTML）如何创建“添加到收藏夹”函数

我正在尝试创建一个“添加到收藏夹”功能，到目前为止，我成功地显示了一个带有图标的按钮，该按钮基于字段

是否为“收藏夹”

，但我无法更新我的数据库

我的问题是：如何在不刷新页面的情况下更改收藏夹状态并将其更新到数据库

编辑： [解决]感谢@Nazkter和Bucky Robert的一个项目。我编辑了下面的工作代码

这是我的密码：

model.py

class ProjectProfile(models.Model):
    project_name = models.CharField(max_length=100)
    artist = models.CharField(max_length=100)
    is_favorite = models.BooleanField(default=False)

    def __str__(self):
        return self.project_name

views.py

def index_view(request):
    context = {
        "table_list": ProjectProfile.objects.all(),
        "title": "Table_List"
    }
    return render(request, 'index.html', context)


def favorite_project(request, projectprofile_id):
    projectprofile = get_object_or_404(ProjectProfile, pk=projectprofile_id)
    try:
        if projectprofile.is_favorite:
            projectprofile.is_favorite = False
        else:
            projectprofile.is_favorite = True
        projectprofile.save()
    except (KeyError, ProjectProfile.DoesNotExist):
        return JsonResponse({'success': False})
    else:
        return JsonResponse({'success': True})

url.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', index_view, name='index_view'),
    url(r'^(?P<projectprofile_id>[0-9]+)/favorite_album/$', favorite_project, name='favorite_project'),
]

---

您可以对Django服务器中的一种服务进行ajax调用

首先，您需要创建一个url来获取ajax请求（url.py）：

接下来，您需要添加一个函数来解析请愿书（views.py）：

最后，您需要在模板中创建一个ajax函数来调用服务：

$.ajax({
    url : "{% url 'ajax_is_favorite'%}",
    data: {
        'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val(),
        'ProjectProfileID': 'here you get the id',
        'isFavorite':true //or false
    },
    type : 'POST',
    dataType : 'json',
    success : function(json) {
        if(json.success === true){
            // do somthing
        }else{
            // do somthing
        }
    }
});

---

不要忘记在模板中添加{%csrf_token%}标记，这是请求所必需的。

您是否有一个python API，以允许ajax与数据库通信的方式公开数据库？如果是这样，您可以将单击事件绑定到按钮，并编写jquery将JSON对象发布到python API端点，然后将JSON对象写入DB。Hello@JacobIRR谢谢您的输入，您是指REST API吗？我将尝试在我的代码中实现它。谢谢。@Nazkter已经在我前面了。这个答案就是我建议的实现。@JacobIRR尽管如此，您的输入仍然很受欢迎，谢谢。我已经尝试过了，但它给了我一个错误（没有返回HttpResponse对象。相反，它没有返回任何对象。）嗨@Nazkter，谢谢您的输入，这是我昨天根据新的波士顿样本项目尝试的，但有点混乱。谢谢你为我简化这件事。我会立即实施，如果有任何问题，我会再次回复soon@M.Izzat请同时提问，你删除了主要问题，并将“可选”作为新问题。请回复您的更改，如果我的答案有效，您可以将其设置为正确答案，并最终针对不同的问题打开其他问题。很抱歉，我会将问题改回原处，我知道stackoverflow对您可以问多少个问题有限制，因为我认为我更改的是同一主题，谢谢你的帮助，也很抱歉incovenient@M.Izzat我很高兴这对你有帮助，如果我的答案是你需要的，那么你可以把它标记为正确答案。

var ProjectListPage = {
    init: function() {
        this.$container = $('.project-container');
        this.render();
        this.bindEvents();
    },

    render: function() {

    },

    bindEvents: function() {
        $('.btn-favorite', this.$container).on('click', function(e) {
            console.log('Hola');
            e.preventDefault();

            var self = $(this);
            var url = $(this).attr('href');
            $.getJSON(url, function(result) {
                if (result.success) {
                    $('.glyphicon-star', self).toggleClass('active');
                }
            });

            return false;
        });
    }
};

$(document).ready(function() {
    ProjectListPage.init();
});

url(r'^ajax_is_favorite/$', views.ajax_is_favorite, name='ajax_is_favorite'),

def ajax_is_favorite(request):
    if not request.is_ajax() or not request.method=='POST':
        return HttpResponseNotAllowed(['POST'])
    else:
        #Here you have to get the data and update the object
        return HttpResponse({"success":True})

$.ajax({
    url : "{% url 'ajax_is_favorite'%}",
    data: {
        'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val(),
        'ProjectProfileID': 'here you get the id',
        'isFavorite':true //or false
    },
    type : 'POST',
    dataType : 'json',
    success : function(json) {
        if(json.success === true){
            // do somthing
        }else{
            // do somthing
        }
    }
});