Ajax перенаправляет на URL с помощью protectDefault ()

Question

Я использую Django для приложения, которое позволяет вам искать и сохранять рецепты.Я пытаюсь создать форму на странице результатов поиска, которая позволяет нажимать кнопку «Сохранить» и создает объект в базе данных без перезагрузки страницы.В текущей настройке, когда я нажимаю кнопку «Сохранить» для формы с id = «add_form», меня перенаправляют на новый URL-адрес (add /), даже если я включил warnDefault ().

Я думал, что это из-за меня, включая действие формы = {% url 'add'%}, однако я попытался удалить действие формы, но это дало мне multiValueDictKeyError для raw_input = request.POST ['Ингредиенты '], поэтому я подумал, что он вызывает неправильную функцию представления views.recipes вместо views.add.Я читал некоторые другие руководства ajax, в которых явно указывается действие формы, поэтому я подумал, что это поможет при вызове неправильной функции представления.

views.py

def recipes(request):
    if request.method == 'POST':
        # check for dietary restrictions
        restrictions = request.POST.getlist('restrictions')
        # format input ingredients
        raw_input = request.POST['ingredients']

    ...

    return render(request, 'recipes/recipes.html', {'results': results})
    else:
    return render(request, 'recipes/recipes.html', {'error': 'Please search for a recipe'})

@csrf_protect
def add(request):
    if request.method == 'POST':
        title = request.POST['title']
        image = request.POST['image']
        source = request.POST['source']
        user = request.user
        try:
            recipe = Recipe.objects.get(image=image, title=title, source=source)
        except ObjectDoesNotExist:
            recipe = Recipe.objects.create(image=image, title=title, source=source)
        finally:
            recipe.users.add(user)
            recipe.save()

    return JsonResponse({'success': True})
else:
    return JsonResponse({'success': False})

urls.py

urlpatterns = [
    path('add/', views.add, name='add'),
    path('', views.recipes, name='recipes'),
 ]

HTML-файл

{% block content %}
...
{% if user.is_authenticated %}
<form action="{% url 'add' %}" id="add_form" method="POST">
    {% csrf_token %}
    <input type="hidden" id="image" name="image" value="{{ result.image }}">
     <input type="hidden" id="title" name="title" value="{{ result.title }}">
     <input type="hidden" id="source" name="source" value="{{ result.source }}">

     <button type="submit" name="recipe" class="btn btn-sm btn-outline-secondary">Save</button>
</form>
{% endif %}
{%  endblock %}


{% block javascript %}

<script type="text/javascript">

$(document).ready(function() {
$("#add_form").on('submit', function(e) {
    e.preventDefault();
    console.log( "form submitted");
    $.ajax({
        type:'POST',
        async: 'false',
        cache: 'false',
        url:'{% url 'add' %}',
        data:{
            image:$('#image').val(),
            title:$('#title').val(),
            source:$('#source').val(),
        },
        success:function(){
            alert("Saved Recipe")
        }
    })
 })
 })

</script>

Я ожидаю любые клики для сохранениякнопка, чтобы остаться на той же странице без перезагрузки и вызвать views.add, который сохранит / создаст объект в базе данных

Answer 1

Измените URL на $(this).attr('action').Он автоматически получит URL из формы вместо того, чтобы явно определять его снова при выполнении вызова ajax.

$.ajax({
        type:'POST',
        async: 'false',
        cache: 'false',
        url: $(this).attr('action'),,
        data:{
            image:$('#image').val(),
            title:$('#title').val(),
            source:$('#source').val(),
        },
        success:function(){
            alert("Saved Recipe")
        }
    })