使用axios

时间:2018-08-19 22:39:51

标签: python jquery ajax django axios

更新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>

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

1 个答案:

答案 0 :(得分:0)

长话短说。 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)