Estoy tratando de publicar un comentario con ajax, pero no funciona. Cuando presiono el botón, la consola no imprime ningún error (como 404, etc.), el comentario no se publica. Objeto devuelto por error:
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} abort: ƒ (e) siempre: ƒ () catch: ƒ (e) done: ƒ () fail: ƒ () getAllResponseHeaders: ƒ () getResponseHeader: ƒ (e) overrideMimeType: ƒ (e) tubería: ƒ () progreso: ƒ () promesa: ƒ (e) readyState: 4 texto de respuesta: "↵" setRequestHeader: ƒ (e,t) estado : ƒ () estado: 200 código de estado: ƒ (e) texto de estado: "OK" luego: ƒ (t,n,r) proto : Objeto
En la línea de comando veo:
"POST/HTTP/1.1" 200 5572
Cuando cambio el botón para "enviar", está publicando y respondiendo con JSON adecuado como:
{"comentario": {"id": 16, "autor": 1, "contenido": "prueba", "publicación": 12}}
Mi código está abajo, cualquier ayuda es apreciada:
vistas.py
def homepage(request): profiles = Follow.objects.filter(follow_by=request.user.profile).values_list('follow_to', flat=True) posts = Post.objects.filter(author_id__in=profiles).order_by('-date_of_create') if request.method == 'POST': form = CommentForm(request.POST) if form.is_valid(): pk = request.POST.get('pk') post = Post.objects.get(pk=pk) new_comment = Comment.objects.create( author = request.user.profile, post = post, content = form.cleaned_data['content'] ) return JsonResponse({'comment': model_to_dict(new_comment)}, status=200) form = CommentForm() context = { 'posts': posts, 'form': form } return render(request, 'posts/homepage.html', context=context)plantilla
<div class="comments" id="{{ post.pk }}" style="display: none"> {% include 'posts/comments.html' %} <form action="" method="post" class="commentForm" data-url="{% url 'post_comments' post.pk %}"> {% csrf_token %} <input type="hidden" name="pk" value="{{ post.pk }}"> {{ form.as_p }} <button type="button" class="commentBtn" id="{{ post.pk }}">Comment</button> </form>agregarComentario.js
$(document).ready(function () { $('.commentBtn').click(function () { let serializedData = $('.commentForm').serialize(); let btn = $(this); let id = btn.attr('id'); console.log($(".commentForm").data('url')); $.ajax({ url: $(".commentForm").data('url'), data: serializedData, type: 'post', dataType: 'json', success: function (data) { console.log(data); $(`#${id}.comments`).load('/posts/comments/' + data.post); $('textarea').val(''); }, error: function(textStatus) { console.log(textStatus) } }) }) }) Editar: utilicé esta pregunta: la solicitud de Ajax devuelve 200 OK, pero se activa un evento de error en lugar de éxito , dataType: 'json' y agregué el tipo de contentType: 'application/json' y ahora obtuve el error 403.
Como ha usado $('.commentForm') para enviar datos del formulario al backend, obtendrá todos los formularios con la clase commentForm y enviará datos de todos los formularios, esa es la razón por la que no funciona. En su lugar, puede cambiar este $('.commentForm').serialize() a $(this).closest(".commentForm").serialize() .
Además, está utilizando #${id}.comments dentro de la función de éxito de ajax, esto anulará cualquier contenido dentro #${id}.comments y cargará contenido nuevo desde la url, es decir: /posts/comments/.. .Entonces, para evitar esta única forma sería rodear su {% include 'posts/comments.html' %} con algún div externo y luego cambiar su selector, es decir: #${id}.comments > .yourouterdivclassname para que el nuevo contenido se cargue solo dentro de ese div por lo tanto, el formulario no se eliminará.