使用axios

Question

更新2 ： 我已经放弃了axios，我敢肯定有办法，现在使用的是带有https://www.webforefront.com/django/formadvancedprocessing.html

中的一些代码的ajax

<script>
    $(document).ready(function () {
        $("#feedbackform").submit(function (event) {
            event.preventDefault();
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                success: function (response) {
                    console.log(response);
                    if (response['success']) {
                        $("#feedbackmessage").html("<div class='alert alert-success'>klasjflaksjf;lkajs;dflkajs;dkflj</div>");
                        $("#feedbackform").addClass("hidden");
                    }
                    if (response['error']) {
                        $("#feedbackmessage").html("<div class='alert alert-danger'>" +
                            response['error']['comment'] + "</div>");
                    }
                },
                error: function (request, status, error) {
                    console.log(request.responseText);
                }
            });
        });
    })
</script>

这将照常验证表单，但是即使有

，我也将重定向到操作网址

$("#feedbackform").submit(function (event) {
        event.preventDefault();

视图：

def error_checking(request):
    print('in error checking')
    if request.POST:
        form = RiderProfileFormSet(request.POST)
        print('made it')
        if form.is_valid():
            print('NOT')
            return JsonResponse({'success': True})
        else:
            print('YES')
            return JsonResponse({'error': form.errors})

我要去哪里

我仍然想学习如何在axios中做到这一点。

更新1 ： 我可以将表单作为字符串获取到视图中，但是却对如何对管理表单数据进行验证感到困惑。这是我没有运气尝试的事情。 一个：

# request_data = json.loads(request.body)['form_to_validate']  # The form as html string
# Error: AttributeError: 'str' object has no attribute 'get'

两个：

# request_data = json.load(request)  # The form as a dict {'form_to_validate': '<form id="reg_form" method.....}
#Error: ValidationError: ['ManagementForm data is missing or has been tampered with']

三个：

# request_data = RiderProfileFormSet(request.POST)
#Error: ValidationError: ['ManagementForm data is missing or has been tampered with']



formset_post = RiderProfileFormSet(request_data)



if formset_post.is_valid():
    print('the formset is valid')

如果我能弄清楚如何将表单验证为字符串或将字符串转换为.is_valid（）可以使用的任何格式。

原始： 我搜索了几个小时，没有运气。另外，我是编程新手。

我正在尝试在Django表单集上执行表单验证。

我在一页上有多个动态添加的（javascript）表单。当用户提交表单时，如果表单中存在错误，则表单将被重新编写返回注册页面。我正在努力保留他们的投入。

我的解决方案是通过axios执行表单验证。 我的问题是我正在获取django.core.exceptions.ValidationError：['ManagementForm数据丢失或已被篡改']

完整追溯：

  

[19 / Aug / 2018 14:39:42]“ GET / event-registration /？event = Lone％20Wolf HTTP / 1.1” 200 13455   [19 / Aug / 2018 14:39:42]“ GET /static/events/style.css HTTP / 1.1” 200340   [19 / Aug / 2018 14:39:42]“ POST / event_formset HTTP / 1.1” 200 7917   在错误检查中   >   内部服务器错误：/ error_checking   追溯（最近一次通话）：     内部文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/exception.py”，第34行       响应= get_response（请求）     _get_response中的文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，第126行       响应= self.process_exception_by_middleware（e，请求）     文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，第124行，_get_response       响应= wraped_callback（请求，* callback_args，** callback_kwargs）     在错误检查中，文件“ /Users/shanecheek/Desktop/projects/lobos/events/views.py”，第164行       如果formset_post.is_valid（）：     is_valid的文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第301行       自我错误     文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第281行，错误       self.full_clean（）     文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第322行，full_clean       对于范围（0，self.total_form_count（））中的i：     文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，行110，在total_form_count中       返回最小值（self.management_form.cleaned_data [TOTAL_FORM_COUNT]，self.absolute_max）     获取中的文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/utils/functional.py”，第37行       res =实例。 dict [self.name] = self.func（instance）     文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第92行，在management_form中       代码=“ missing_management_form”，   django.core.exceptions.ValidationError：['ManagementForm数据丢失或已被篡改']

在正常提交情况下，我没有这个问题。但是，当我调用vue方法时：

reveal_pay: function (request) {
let app = this
console.log('called the reveal_pay')
axios.post("{% url 'error_checking' %}",
    {
        headers:
            {
                'X-CSRFToken': '{{ csrf_token }}',
            }
    }
)

    .then(function (response) {
        app.formIsValid = response.data.errors
    })},

我认为原因是我没有正确提交表单，没有将正确的数据传递给函数：

def error_checking(request):
    print('in error checking')
    print(request.POST.get)
    formset_post = RiderProfileFormSet(request.POST)
    # formset_post = json.loads(request.body)['form_to_validate']
    print(formset_post)

    if formset_post.is_valid():
        print('the formset is valid')
        print('passing to event_register')
        event_register(request)
    else:
        print('formset not valid')
        print(formset_post.errors)
        errors = formset_post.errors
        args = {'errors': errors}
        return JsonResponse(args)

我尝试通过js（form_to_validate = document.getElementById（'reg_form'））获取表单并将其传递到正文中，但是当我尝试将其用作表单集时，出现错误：AttributeError：'str'对象没有属性“错误”

  

[19 / Aug / 2018 15:31:02]“ GET / event-registration /？event = Lone％20Wolf   HTTP / 1.1“ 200 13464 [19 / Aug / 2018 15:31:02]”   /static/events/style.css HTTP / 1.1“ 200340 [19 / Aug / 2018 15:31:02]   错误检查中的“ POST / event_formset HTTP / 1.1” 200 7917> form_to_validate   内部服务器错误：/ error_checking追溯（最近的呼叫   最后）：文件   “ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/exception.py”，   第34行，在内部       response = get_response（request）文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，   _get_response中的第126行       响应= self.process_exception_by_middleware（e，request）文件“ /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，   _get_response中的第124行       响应= wraped_callback（request，* callback_args，** callback_kwargs）文件“ /Users/shanecheek/Desktop/projects/lobos/events/views.py”，第171行，   在error_checking中       错误= formset_post.errors AttributeError：“ str”对象没有属性“ errors”

模板：

<form id='reg_form' class="form-horizontal" method="POST">
    {% csrf_token %}
    {{ formset.management_form }}
    <div style="background-color: black; padding: 20px 60px 20px 60px; margin-right: 15px;"
         class="row form-row">
        <div class="input-group">
            <div v-for="form in formList">
                <br>
                <div style="background-color: #ffe673; padding: 20px" v-html="form">
                </div>
            </div>
            <div style="padding-left: 60px; background-color: black">
                <p v-on:click="addForm" class="btn btn-primary btn-lg">Add Form</p>
                <p v-on:click="formID" class="btn btn-primary btn-lg">Delete Form</p>
                <p v-on:click="totalCost" class="btn btn-primary btn-lg">Total Cost</p>

            </div>

            <br>

            <br>
        </div>
    </div>
    <div style="margin: 0px 15px 100px -15px; padding: 0px 0px 60px 60px; background-color: black">
        {#<button id="form_submit_button" style="" type="submit" class="btn btn-primary btn-lg">Finish Registration</button>#}
        <div id="form_submit_button" v-on:click="reveal_pay"class="btn btn-primary btn-lg">AXIOS Finish Registration</div>
        <div class="btn btn-primary btn-lg">
            <paypal-checkout
                    :amount='amountStr'
                    currency="USD"
                    :button-style="aStyle"
                    :client="paypal"
                    env="sandbox"
                    v-on:payment-authorized="paymentAuthorized"
                    v-on:payment-completed="paymentCompleted"
                    v-on:payment-cancelled="paymentCancelled">
            </paypal-checkout>
        </div>
    </div>
</form>

让我知道您是否需要其他信息。第一次在这里问一个问题。 -谢谢！

Answer 1

长话短说。 Django接受一个JSON对象，然后将其传递给视图中的modelformset对象。 这是我的方法：

表格：

<form v-on:submit.prevent="the3DayMethod" method="POST" id="feedbackform">
    {% csrf_token %}
    {{ formset.management_form }}
    <div style="background-color: black; padding: 20px 60px 20px 60px; margin-right: 15px;"
         class="row form-row">
        <div class="input-group">
            <div v-for="form in formList">
                <br>
                <div style="background-color: #ffe673; padding: 20px" v-html="form">
                </div>
            </div>
            <div style="padding-left: 60px; background-color: black">
                <p v-on:click="addForm" class="btn btn-primary btn-lg">Add Form</p>
                <p v-on:click="formID" class="btn btn-primary btn-lg">Delete Form</p>
            </div>
            <br>
        </div>
    </div>
    <div style="margin: 0px 15px 100px -15px; padding: 0px 0px 60px 60px; background-color: black">
        <div v-show="formIsValid === 'False'">
            <input v-on:click="the3DayMethod" class="btn btn-primary" value=" Check for Errors">
        </div>
        <div v-show="formIsValid === 'True'" class="btn btn-primary btn-lg">
            <paypal-checkout
                    :amount='amountStr'
                    currency="USD"
                    :button-style="aStyle"
                    :client="paypal"
                    env="sandbox"
                    v-on:payment-authorized="paymentAuthorized"
                    v-on:payment-completed="paymentCompleted"
                    v-on:payment-cancelled="paymentCancelled">
            </paypal-checkout>
        </div>
    </div>
</form>

Vue方法/ Axios：

the3DayMethod: function () {
    let app = this
    var object = {}
    forms = document.getElementById('feedbackform')

    var formData = new FormData(forms),
        result = {};
    for (var entry of formData.entries()) {
        result[entry[0]] = entry[1];
    }
    data = JSON.stringify(result)
    console.log(result);
    console.log('called the the3DayMethod')


    axios.post("{% url 'error_checking' %}",
        data,
        {
            headers:
                {
                    'X-CSRFToken': '{{ csrf_token }}',
                }
        }
    )
        .then(function (response) {
            app.formIsValid = response.data.errors
        })
},

Django视图：

def error_checking(request):

    forms = json.load(request)

    formset = RiderProfileFormSet(forms)

    if formset.is_valid():
        print('VALID')
        v = {'success': "True"}
        return JsonResponse(v)
    else:
        print('NOT VALID')
        v = {'error': formset.errors}
        return JsonResponse(v)