当AJAX在Django中保存（并重新填充）我的表单时，我为什么会这样做？

Question

我正在使用AJAX（和一些Angular）保存我的表单草稿。

<!-- index.html -->

...
<input id="id_title" name="title" ng-model="title" placeholder="Question Title" type="text" value="" required />
...

<script>

    app.controller("addQuestionCtrl", function($http) {

        $scope.title = '{% if form.title.value is not None %}{{ form.title.value }}{% endif %}';
        ...

        $interval(function() {
            ...
            data = {title:''+$scope.title, ...};
            $http.post("{% url 'save_draft' %}", data).then(function(response) {
                ...
            }, function failureCallback(error) {
                ...
            });
        }, 10000);

    });

</script>

这一切正常，并发送'作为'。在我的view.py我转换数据并将其存储在会话中：

def save_draft(request):
    ....
    posted = json.loads(request.body.decode("utf-8"))
    ...
    request.session['draft'] = {
        'title': posted.get('title', None),
        ...
    }

然后在页面加载时填充相关字段

def question_add(request):
    ....
    if request.method == 'POST':
        ....
    else:
        draft_question = request.session.get('draft', False)
        if draft_question:
            form = QuestionAddForm(initial={
                'title':draft_question['title'],
                ...
            })

不幸的是，这转变了这个

进入这个

这不是客户端上的编码问题，因为该字段呈现为

 <input id="id_title" name="title" ng-model="title" ... value="&#39;title in quotes&#39;" />

我不确定为什么会这样：（

Answer 1

你应该做什么（这只是草案代码）：

class QuestionAddForm(forms.ModelForm):
    # ...

    def draft_json(self, request):
        # use attribute or pass request to form init method
        draft_data = request.session.get('draft', False)
        return json.dumps(draft_data)


# in your view
context['draft_json'] = form.draft_json(request)


# in template
<script>
    var draft_data = JSON.parse('{{ draft_json|safe }}');
    $scope.title = draft_data.title
</script>

这里的要点是使用json格式渲染和解析数据。 更好的方法是使用ajax而不是从后端传递草稿数据，以避免将js代码与模板渲染内容混合。