Django提交表单而不刷新页面

I'm using Django-Angular and trying to post a form and obtain data in back-end..I'm able to achieve this but found that the page is reloading while saving the form. How can we achieve the same without page render?

我正在使用Django-Angular并尝试发布一个表单并在后端获取数据。我能够实现这一点但发现页面在保存表单时正在重新加载。如何在没有页面渲染的情况下实现相同的目标

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>

script

$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']}
    })
    }

Please let me know code above is correct way of posting data? How can we post data from angular to backend(django) without page refresh

请告诉我上面的代码是否正确发布数据?如何在没有页面刷新的情况下将数据从角度发布到后端(django)

Thanks in advance...Any help is much appreciated

在此先感谢...非常感谢任何帮助

2 个解决方案

#1

In your home request you should not render the page again, but rather return a string or some JSON to the client. If you are using a newish version of django you can do something like this:

在您的家庭请求中,您不应该再次呈现页面,而是返回一个字符串或一些JSON到客户端。如果您使用的是新版本的django,您可以执行以下操作:

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', {})

#2

Replace type="submit with type="button". Then you can just call any method in the backend with ng-click="ctrl.foo()"

替换type =“submit with type =”button“。然后你可以用ng-click =”ctrl.foo()“调用后端的任何方法

At least that is what I have been doing so far. Looking at the docs however indicates that is not the issue.

至少这是我到目前为止所做的。然而,查看文档表明这不是问题。

#1