Django提交表单而不刷新页面答案

【问题标题】：Django submit form without page refreshDjango提交表单而不刷新页面
【发布时间】：2016-04-05 14:59:28
【问题描述】：

我正在使用 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>

脚本

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

请告诉我上面的代码是正确的数据发布方式？我们如何发布数据从角度到后端（django）不刷新页面

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

【问题讨论】：

标签： javascript python angularjs django forms

【解决方案1】：

在您的主页请求中，您不应该再次呈现页面，而是返回一个字符串或一些 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', {})

【讨论】：

感谢回复...但是表单提交后html页面会重新加载....提交表单后我应该如何避免页面刷新
如果您的处理程序代码中满足此条件：如果 request.META['CONTENT_TYPE'] 中的 'application/json'：页面不应刷新。在您使用 ajax 在角度侧提交表单时记录日志。看起来你在做什么。
我得到........ POST 127.0.0.1:8000 403 (Forbidden) when using json response.........可能有什么问题？
您发布的代码是您应用的实际代码吗？如果没有使用实际代码发布问题。
这是我的完整代码…………我学到了一些东西，所以创建了测试应用程序……添加 Rest 框架（DRF）会解决这个问题吗？

【解决方案2】：

将type="submit 替换为type="button"。然后你可以在后端调用任何方法ng-click="ctrl.foo()"

至少到目前为止我一直在这样做。然而，查看文档表明这不是问题。

【讨论】：

很抱歉。就像我根据文档添加的一样，没关系。但是我记得读过一些 Angular 有问题阻止浏览器提交表单，除非它设法拦截调用。