如何使用AJAX使用相同的html模板(使用Python和Django)创建和编辑新帖子?

2024-04-23 06:10:49 发布

您现在位置:Python中文网/ 问答频道 /正文

我正试图切换到使用AJAX保存表单,而不仅仅是Python/Django(我是一个十足的新手,所以请原谅我的白痴)。以下是我努力实现的目标:

What I'm trying to achieve

url.py:

from django.urls import path 
from . import views

urlpatterns = [
    path('', views.blurb_new, name='blurb_new'),
    path('blurb/new/', views.blurb_new, name='blurb_new'),
    path('blurb/<int:pk>/edit/', views.blurb_edit, name='blurb_edit'),
]

views.py(相关部分):

@login_required
def blurb_new(request):
    if request.method == "POST":
        form = BlurbForm(request.POST)
        if form.is_valid():
            blurb = form.save(commit=False)
            blurb.author = request.user
            blurb.save()
            return redirect('blurb_edit', pk=blurb.pk)
    else:
        form = BlurbForm()
    return render(request, 'mysite/blurb_edit.html', {'form': form})

@login_required
def blurb_edit(request, pk):
    blurb = get_object_or_404(Blurb, pk=pk)
    if request.method == "POST":
        form = BlurbForm(request.POST, instance=blurb)
        if form.is_valid():
            blurb = form.save(commit=False)
            blurb.author = request.user
            blurb.last_edited_date = timezone.now()
            blurb.save()
            return redirect('blurb_edit', pk=blurb.pk)
    else:
        form = BlurbForm(instance=blurb)
    return render(request, 'mysite/blurb_edit.html', {'form': form, 'blurb': blurb})

blurb_edit.html(相关部分):

<form id="myform" method="POST" class="blurb-form">{% csrf_token %}
   <input id="blurb-name" name="title"
        {% if form.title.value != None %}value="{{ form.title.value }}"{% endif %} 
   />
   <textarea name="text" id="my-textarea">
        {% if form.text.value != None %}
            {{ form.text.value }}
        {% else %}
            Type your blurb here.
        {% endif %}
    </textarea>
    <button type="submit">Save</button>
</form>

在我使用AJAX之前,views.py完全完成了它的工作(除了讨厌的、不需要的页面刷新)

因为我讨厌每次你保存一个blurb编辑时页面刷新的方式,所以我决定改用AJAX

这里是我添加的一些AJAX。它适用于编辑一个blurb,但不适用于创建一个新的blurb——可能是因为一个新的blurb还没有pk。我不知道如何解决这个问题

blurb\u edit.html中的AJAX:

<script type="text/javascript">
    $(document).on('submit', '#myform', function(e) { 
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url:'{% url 'blurb_edit' pk=blurb.pk %}', // <--- THIS "pk" isn't working if it's a new blurb
            data:{
                title:$('#blurb-name').val(),
                text:$('#my-textarea').val(),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },

            success:function() {
                alert("yay! it worked.")
            }

        })

    });
</script>

所以我可以很好地编辑广告

这是我加载主页创建新的blurb时遇到的错误:

NoReverseMatch at /
Reverse for 'blurb_edit' with keyword arguments '{'pk': ''}' not found. 1 pattern(s) tried: ['blurb/(?P<pk>[0-9]+)/edit/$']

如何解决这个“pk”问题,使AJAX可以像views.py那样工作

再一次,请原谅我的无知(可能还有一些糟糕的代码),因为我对这些东西还不熟悉,并且试图用头脑去理解它。谢谢!:)


Tags: pathtextnamepyformnewifvalue
1条回答
网友
1楼 · 发布于 2024-04-23 06:10:49
<script type="text/javascript">
$(document).on('submit', '#myform', function(e) { 
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url:'blurb_edit/{{blurb.pk}}/edit/', // check this version of url
        data:{
            title:$('#blurb-name').val(),
            text:$('#my-textarea').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },

        success:function() {
            alert("yay! it worked.")
        }

    })

});

相关问题 更多 >