Django實(shí)戰(zhàn)項(xiàng)目-在Django中使用Ajax (4）

1.ModelForm

ModelForm與之前見(jiàn)到的Form效果一樣，用著跟方便，使用下面方式導(dǎo)入

from django import forms

對(duì)于下面這個(gè)model使用ModelForm與Form的兩種方式

class UserAsk(models.Model):
    name = models.CharField(max_length=20, verbose_name="姓名")
    mobile = models.CharField(max_length=11, verbose_name="手機(jī)號(hào)")
    course_name = models.CharField(max_length=50, verbose_name="課程名稱(chēng)")
    add_time = models.DateTimeField(default=datetime.now, verbose_name="添加時(shí)間")

    class Meta:
        verbose_name = "用戶(hù)咨詢(xún)"
        verbose_name_plural = verbose_name

兩種方式中如果model的屬性比較多用第二種會(huì)麻煩很多

class UserAskForms(forms.ModelForm):
    mobile = forms.CharField(required=True,max_length=11, min_length=11)
    class Meta:
        model = UserAsk
        fields = ['name', 'mobile', 'course_name']

class UserAskForms(Form):
    name = forms.CharField(required=True)
    mobile = forms.CharField(required=True, max_length=11, min_length=11)
    course_name = forms.CharField(required=True)

使用方式兩者無(wú)異

user_ask_form = UserAskForms(request.POST)
if user_ask_form.is_valid():

2.Ajax的使用

2.1

html中的代碼

 <div class="right companyright">
                <div class="head">我要學(xué)習(xí)</div>
                <form class="rightform" id="jsStayForm" method="post">
                    <div>
                        ![]({% static 'images/rightform1.png' %})
                        <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25"/>
                    </div>
                    <div>
                        ![]({% static 'images/rightform2.png' %})
                        <input type="text" name="mobile" id="companyMobile" placeholder="聯(lián)系電話"/>
                    </div>
                    <div>
                        ![]({% static 'images/rightform3.png' %})
                        <input type="text" name="course_name" id="companyAddress" placeholder="課程名" maxlength="50"/>
                    </div>
                    <p class="error company-tips" id="jsCompanyTips"></p>
                    <input class="btn" type="button" id="jsStayBtn" value="立即咨詢(xún) >"/>
                    <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy'/>
                    {% csrf_token %}
                </form>
            </div>

view的代碼

class AddUserAskView(View):
    """
       用戶(hù)添加咨詢(xún)
    """
    def post(self, request):
        user_ask_form = UserAskForms(request.POST)
        if user_ask_form.is_valid():
            user_ask = user_ask_form.save(commit=True)
            return HttpResponse('{"status" : "success"}', content_type='application/json')
        else:
            return HttpResponse('{"status" : "fail", "msg" : "添加出錯(cuò)"}', content_type='application/json')

script代碼

<script>
        $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});
        $(function () {
            $('#jsStayBtn').on('click', function () {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'org:user_ask' %}",
                    data: $('#jsStayForm').serialize(),
                    async: true,
                    success: function (data) {
                        if (data.status == 'success') {
                            $('#jsStayForm')[0].reset();
                            alert("提交成功")
                        } else if (data.status == 'fail') {
                            $('#jsCompanyTips').html(data.msg)
                        }
                    },
                });
            });
        })
    </script>

2.2遇到的問(wèn)題

1.403 csrf
在html中添加了“{% csrf_token %}”但是依然會(huì)提示403錯(cuò)誤，看到別人說(shuō)是由于setting.py中的“MIDDLEWARE”添加了“'django.middleware.csrf.CsrfViewMiddleware',”這個(gè)要加上，為了數(shù)據(jù)安全
在script中需要加上才能避免403錯(cuò)誤

$.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});

2.無(wú)法獲取form里傳的數(shù)據(jù)
我在開(kāi)發(fā)過(guò)程中遇到了無(wú)法得到form里面?zhèn)鞯臄?shù)據(jù)，取數(shù)據(jù)是用“$('#jsStayForm').serialize()”，這樣沒(méi)有必要對(duì)每一個(gè)參數(shù)都寫(xiě)一遍