Django Ajax Form отправка неправильно перенаправить на другую страницу - PullRequest
Новая
       10

Django Ajax Form отправка неправильно перенаправить на другую страницу

0 голосов
/ 26 апреля 2018

Когда я использую ajax для отправки формы комментария в Django, страница перенаправляется на пустую страницу с данными об успехе: 

{"status":"success", "msg":"添加成功"}

, но не оставаться на текущей странице. Я хочу, чтобы страница оставалась на текущей странице и показывала мне новый комментарий.

Вот мой обзор update_comment: 

def update_comment(request, news_pk):
    news = get_object_or_404(News, id=news_pk)
    comment_form = CommentForm(request.POST or None)
    if request.method == 'POST' and comment_form.is_valid():
        if not request.user.is_authenticated:
            return render(request, 'login.html', {})
        comments = comment_form.cleaned_data.get("comment")
        news_comment = NewsComments(user=request.user, comments=comments, news=news)
        news_comment.save()

    # return redirect(reverse('news:news_detail', kwargs={'news_pk': news.id}))
        return HttpResponse('{"status":"success", "msg":"添加成功"}', content_type='application/json')
    else:
        return HttpResponse('{"status":"fail", "msg":"添加失败"}', content_type='application/json')

Вот мой аякс: 

$(document).on('submit', 'comment_form', function(e){
        e.preventDefault();

        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'operation:update_comment' news.id %}",
            data:{'news_pk':{{ news.id }}, 'comments':comments},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data) {
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        window.location.href="login";
                    }else{
                        alert(data.msg)
                    }
                }else if(data.status == 'success'){
                    window.location.reload();//refresh current page.
                }

                },
        });
    });

Вот моя форма: 

<form id="comment_form" action="{%  url 'operation:update_comment' news.id %}" method="POST" >
{% csrf_token %}

<textarea id="comment_textarea"name="comment"></textarea>

<input type="submit" value="Submit"> </input>

</form>

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Наконец-то я это сделал! Спасибо Господу! Очень взволнован!

У меня есть три основные проблемы в моем предыдущем коде.

Первое: поскольку ajax отправит news_pk в представление update_comment , поэтому мне не нужно добавлять news_pk в URL и шаблон этого представления (в URL тега <form> и URL в ajax), поэтому я удалил их, иначе данные все равно будут проходить через форму, но не через ajax.

Второе: моя привязка неверна, у меня есть обработчик кликов в форме, он должен быть обработчиком отправки. Если бы я привязывал его к кнопке, то использовал бы обработчик click. Ajax не работает в посте Django Но в этой части я все еще немного сбит с толку, между способом вершины кнопки и способом отправки формы.

Третья проблема - я ошибся в «комментариях» и «комментариях». «Комментарий» - это атрибут имени <textarea>, через который Form.py получает данные.

комментарии определяются от ajax до var comments = $("#js-pl-textarea").val(),, поэтому в представлении мне нужно использовать comments = request.POST.get("comments", ""), но не комментарий, вот причина, по которой «сообщение не удалось».

Ниже приведен мой код.

Аякс: 

 $("#comment_form").submit(function(){
        var comments = $("#js-pl-textarea").val()

        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'operation:update_comment' %}",
            data:{'news_pk':{{ news.pk }}, 'comments':comments},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data) {
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        window.location.href="login";
                    }else{
                        alert(data.msg)
                    }
                }else if(data.status == 'success'){
                    window.location.reload();//refresh current page.
                }

                },
        });
        return false;

    });

Вот мое представление udate_comment: 

@login_required
def update_comment(request):
        news_pk = request.POST.get("news_pk", 0)
        comments = request.POST.get("comments", "")
        if int(news_pk) > 0 and comments:
            news_comments = NewsComments()
            news = News.objects.get(id=int(news_pk))
            news_comments.news = news
            news_comments.comments = comments
            news_comments.user = request.user
            news_comments.save()
            return HttpResponse('{"status":"success", "msg":"添加成功"}', content_type='application/json')
        else:
            return HttpResponse('{"status":"fail", "msg":"添加失败"}', content_type='application/json')

Вот моя форма в шаблоне: 

<form id="comment_form" action="{%  url 'operation:update_comment'%}" method="POST" >
{% csrf_token %}

<textarea id="js-pl-textarea"name="comment"></textarea>

<input type="submit" value="Submit"> </input>

</form>

Я очень ценю ответ каждого! С вашим ответом я разобрался с этими вопросами шаг за шагом!

0 голосов
/ 27 апреля 2018

У меня есть что-то похожее в моем проекте. Это сценарий, чтобы любить песню. Я просто поставлю здесь соответствующие коды.

  1. Ajax-скрипт. Я поместил этот скрипт в отдельный файл с именем like_script.html. Я называю это в шаблоне, используя шаблон django include

<script>
    $('#like').click(function(){
          $.ajax({
                   type: "POST",
                   url: "{% url 'song:like_song' %}",
                   data: {'pk': $(this).attr('pk'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(response) {
                          alert(response.message);
                    },
                    error: function(rs, e) {
                           alert(rs.responseText);
                    }
              }); 
        })
    </script>

Вид Джанго 

import json
from django.http import HttpResponse
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_POST
@login_required
@require_POST
def song_like_view(request):
    if request.method == 'POST':
        user = SiteUser.objects.get(user=request.user)
        pk = request.POST.get('pk', None)
        song = get_object_or_404(Song, pk=pk)

        if song.likes.filter(pk=user.pk).exists():
            song.likes.remove(user)
            song.like_count = song.likes.count()
            song.save(update_fields=['like_count'])
            message = "You unstarred this song.\n {} now has {} stars".format(song.title, song.like_count)
        else:
            song.likes.add(user)
            song.like_count = song.likes.count()
            song.save(update_fields=['like_count'])
            message = "You starred this song.\n {} now has {} stars".format(song.title, song.like_count)
    context = {'message' : message}
    return HttpResponse(json.dumps(context), content_type='application/json')

URL 

urlpatterns = path("like/", views.song_like_view, name='like_song'),
  1. Шаблон, где скрипт называется 

    <a class="btn btn-sm btn-primary" href="" id="like" name="{{ song.pk }}" value="Like"></i> Unstar</a>
     {% include 'like_script.html' %}

Одна и та же кнопка для похожих и непохожих. Я надеюсь, что вы можете следовать логике, чтобы сделать свое право. Обратите внимание, что, по вашему мнению, вам не нужно указывать pk. Просто получите его из POST данных pk = request.POST.get('pk', None)

...