(Django/HTML) 如何创建添加到收藏功能答案

【问题标题】：(Django/HTML) How to create Add to favorite Function(Django/HTML) 如何创建添加到收藏功能
【发布时间】：2017-05-23 03:54:29
【问题描述】：

我正在尝试创建一个添加到收藏夹功能，到目前为止，我设法显示一个带有图标的按钮，该按钮基于 is_favorite 字段，但我无法更新我的数据库。

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

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

这是我的代码：

模型.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'),
]

index.html

<head>
    <meta charset="UTF-8">
    <title>Favorite function</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Favorite Function</h1>

 <table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Artist</th>
            <th>Favorite</th>
        </tr>
    </thead>
    <tbody>
        {% for data in table_list %}{% csrf_token %}
            <tr >

                <td>{{data.project_name}}</td>
                <td>{{data.artist}}</td>
                <!-- Favorite Album -->
                <td><a href="{% url 'favorite_project' data.id %}"  class="btn btn-default btn-sm btn-favorite" role="button"><span class=" glyphicon glyphicon-star {% if data.is_favorite %}active{% endif %}" action=""></span></a></td>
            </tr>
        {% endfor %}
    </tbody>
</table>
</body>

javascript

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();
});

【问题讨论】：

您是否有一个 python API 以允许 ajax 与之通信的方式公开您的数据库？如果是这样，您可以将单击事件绑定到按钮，并编写 jquery 以将 JSON 对象发布到您的 python API 端点，然后写入数据库。
你好@JacobIRR 谢谢你的意见，你指的是REST API对吗？我会尝试在我的代码中实现它。谢谢。
@Nazkter 已经领先于我了。这个答案就是我所建议的实现。
@JacobIRR 尽管如此，您的输入仍然非常感谢，谢谢
我已经尝试过了，它给了我一个错误（没有返回 HttpResponse 对象。它返回了 None。）

标签： javascript jquery python django

【解决方案1】：

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

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

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

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

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 函数来调用服务：

$.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 %} 标签，这是请求所必需的。

【讨论】：

嗨@Nazkter，感谢您的意见，这是我昨天根据新波士顿示例项目尝试的，但有点令人困惑。谢谢你为我简化了这个。我会立即实施，如果有什么我会尽快回复
@M.Izzat 当时请提出问题，您删除了主要问题并将“可选”作为新问题。请还原您的更改，如果我的答案有效，您可以将其设置为正确答案，最后针对不同的问题打开其他问题。
我很抱歉我会改回这个问题，我知道stackoverflow对你可以问多少个问题有限制，因为它在同一个主题中，我想我会改变它，谢谢你给您带来的不便，请帮助和抱歉
@M.Izzat 很高兴它对您有所帮助，如果我的答案是您所需要的，那么您可以将其标记为正确答案。