Джанго отправить форму без обновления страницы

Question

Я использую Django-Угловую и пытаюсь опубликовать форму и получить данные в задней end..I'm удалось добиться этого, но обнаружил, что страницы перезагрузки при сохранении формы. Как мы можем добиться такого же результата без рендеринга страниц?

forms.py

def home(request): 
    if 'application/json' in request.META['CONTENT_TYPE']: 
     print 'hi' 
     print request.body 

    return render(request, 'home.html', {}) 

home.html

<form name="indexForm" ng-submit="submitForm()"> 

    <div class="form-group"> 
     <label>File Path</label> 
     <input type="text" name="path" class="form-control" ng-model="file.path"> 
    </div> 
    <div class="form-group"> 
     <label>File Name</label> 
     <input type="text" name="file_name" class="form-control" ng-model="file.file_name"> 
    </div> 
    <div class="form-group"> 
     <label>ext</label> 
     <input type="text" name="ext" class="form-control" ng-model="file.ext"> 
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button> 

</form> 

сценарий

$scope.submitForm = function() { 
    console.log('from submit') 
    $http({ 
     url: 'http://127.0.0.1:8000/', 
     data: $scope.file, 
     method: 'POST', 
     headers: { 
      'X-CSRFToken': $cookies['csrftoken']} 
    }) 
    } 

Пожалуйста, дайте мне знать код выше правильный способ размещения данных? Как мы разместить данные от углового бакэнду (Джанго) без страницы можно обновить

Спасибо заранее ... Любая помощь очень ценится

Answer 1

В домашнем запросе вы не должны отобразить страницу еще раз, а скорее верните строку или некоторый JSON клиенту. Если вы используете версию довольно новый Джанго вы можете сделать что-то вроде этого:

from django.http import JsonResponse 

def home(request): 
if 'application/json' in request.META['CONTENT_TYPE']: 
    print 'hi' 
    print request.body 
    return JsonResponse({'foo':'bar'}) 

return render(request, 'home.html', {}) 

Answer 2

Replace type="submit с type="button". Тогда вы можете просто вызвать любой метод в бэкэнд с ng-click="ctrl.foo()"

По крайней мере, это то, что я делал до сих пор. Однако, глядя на документы, это не проблема.