如何通过使用ajax获取数据表单数据库并将数据发送到下拉列表中

时间:2019-06-19 12:51:34

标签: django-forms django-views django-ajax-selects

在Django的依赖下拉列表中从数据库检索数据时,我遇到了问题。 如何为每个字段编写此模板的视图? 我尝试了传统技术,但这不是定义视图的实际方法。

views.py

    from django.shortcuts import render
    from .forms import StudentEnquiryForm
    from .models import StudentEnquiry,Branch,Department
    def index(request):
        return render(request,'student/index.html',{})
    def admissionfrm(request):
        return render(request,'student/admissionfrm.html',{})
    def applicantfrm(request):
        if request.method=='POST':
            fname=request.POST.get('fname')
            mname=request.POST.get('mname')
            lname=request.POST.get('lname')
            dob=request.POST.get('dob')
            s=StudentEnquiry(first_name=fname,middle_name=mname,last_name=lname,date_of_birth=dob,phone_no=1521545454,
            email_id='sxxxanxxxxxxp@gmail.com',shift='',last_education='',entrance='',year=2011)
            s.save()
            return render(request,'student/applicantfrm.html')
        else:
            return render(request,'student/applicantfrm.html')
    def studentadmissionlist(request):
        return render(request,'student/studentadmissionlist.html',{})
    def load_branches(request):
        department_id=Department.objects.get('department')
        department=Department.objects.filter(department_id=department_id)
        branches=Branch.objects.filter(department_id=department_id).order_by('name')
        context={
            'branches':branches,
            'department':department,
        }
        return render(request,'student/department_options.html',context)

在视图中,我正在测试是否要将数据插入数据库,但是由于下拉菜单的笨拙风格,因此无法获取

urls.py

    from django.urls import path
    from . import views

    urlpatterns=[
        path('',views.index,name='home'),
        path('admissionfrm/',views.admissionfrm,name='admissionfrm'),
        path('applicantfrm/',views.applicantfrm,name='applicantfrm'),
        path('studentadmissionlist/',views.studentadmissionlist,name='studentadmissionlist'),
        path('ajax/load-branch',views.load_branches,name='ajax_load_branch'),
    ]

models.py

    from django.db import models
    import datetime
    def year_choices():
        return [(r,r) for r in range(1984, datetime.date.today().year+1)]
    def current_year():
        return datetime.date.today().year
    class Department(models.Model):
        department=models.CharField(max_length=50)
        def __str__(self):
            return self.department
    class Branch(models.Model):
        department=models.ForeignKey(Department,on_delete=models.CASCADE)
        branch=models.CharField(max_length=50)
        def __str__(self):
            return self.branch
    class StudentEnquiry(models.Model):
        YEAR_CHOICES = [(r,r) for r in range(1984, datetime.date.today().year+1)]
        first_name=models.CharField(max_length=20)
        middle_name=models.CharField(max_length=20)
        last_name=models.CharField(max_length=20)
        date_of_birth=models.DateField()
        phone_no=models.IntegerField()
        email_id=models.EmailField()
        department=models.ForeignKey(Department,on_delete=models.CASCADE,blank=False)
        branch=models.ForeignKey(Branch,on_delete=models.CASCADE,blank=False)
        shift=models.CharField(max_length=10)
        last_education=models.TextField()
        entrance=models.CharField(max_length=40)
        year = models.IntegerField(('year'), choices=year_choices(), default=current_year())
        def __str__(self):
            return self.first_name

在模型分支中,取决于部门。部门和分支机构必须提取下拉列表。数据必须动态显示在选择选项下拉列表中。

在以下表格部分中,我完全空白,因为我不知道如何从applicationfrm.html页的特定字段填充数据库中的数据。

forms.py

    from django import forms
    from .models import StudentEnquiry, Branch

    class StudentEnquiryForm(forms.ModelForm):
        class Meta:
            model=StudentEnquiry
            fields=('first_name','middle_name','last_name','date_of_birth','phone_no','email_id','last_education','entrance','year')
    class CourseFetch(forms.ModelForm):
        class Meta:
            model=StudentEnquiry
            fields=('department','branch')

            def __init__(self,*args,**kwargs):
                super().__init__(*args,**kwargs)
                self.fields['branch'].queryset=Branch.objects.none()

department_options.html

    <div class="form-group col-sm-4 col-xs-12">
        <label>Course</label>
        <select class="form-control">
            <option value="">----Select Course----</option>
            {% for branch in branches %}
            <option value="{{ branch.id }}">{{branch.branch}}</option>
            {% endfor %}
        </select>
    </div>

applicantfrm.html

    {% extends 'student/base.html' %}
    {% load static %}
    {% block content %}

    <section id="main-content">
            <div class="wrapper">
                <div class="row">
                    <div class="col-lg-8 col-sm-8 col-sm-offset-2">
                        <div class="">
                            <div class="panel-body">
                                <div class="text-center">
                                    <h1 class="hdrcolorbg">
                                        Applicant Registration Form
                                    </h1>
                                </div>
                                <form role="form" class="frmbgg"  method="POST" id="studentForm" data-branch-url="{% url 'ajax_load_branch' %}" novalidate>
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="">
                                                <label>Name of Applicant</label>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <input type="text" name="fname" class="form-control" placeholder="First Name">
                                                </div>
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <input type="text" name="mname" class="form-control" placeholder="Middle Name">
                                                </div>
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <input type="text" name="lname" class="form-control" placeholder="Last Name">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <label>Date of Birth</label>
                                                    <input type="text" name="dob" class="form-control" placeholder="Date of Birth">
                                                </div>
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <label>phone Number</label>
                                                    <input type="text" name="phone" class="form-control" placeholder="phone Number">
                                                </div>
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <label>Email ID</label>
                                                    <input type="text" name="email" class="form-control" placeholder="Email ID">
                                                </div>
                                            </div>
                                            <div class="row">
                                                    <div class="form-group col-sm-4 col-xs-12">
                                                            <label>Department</label>
                                                            <select class="form-control">
                                                                <option value="">----Select Department----</option>
                                                                {% for dept in department %}
                                                                <option value="{{ dept.pk }}">{{dept.department}}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>

                                                {% include 'student/department_options.html' %}
                                                <div class="form-group col-sm-4 col-xs-12">
                                                        <label>Shift</label>
                                                        <select class="form-control">
                                                            <option value="">----Select Shift----</option>
                                                            <option value="First Shift">First Shift</option>
                                                            <option value="Second Shift">Second Shift</option>
                                                        </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-sm-12 col-xs-12">
                                                    <label>Educational Qualification Past Determined</label>
                                                    <textarea class="form-control txrare" placeholder="Educational Qualification Past Determined"></textarea>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <label>Entrance</label>
                                                    <input type="text" class="form-control" placeholder="Entrance">
                                                </div>
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <label>Year</label>
                                                    <input type="text" class="form-control" placeholder="Year">
                                                </div>
                                                <div class="form-group col-sm-4 col-xs-12">
                                                    <label>Score</label>
                                                    <input type="text" class="form-control" placeholder="Score">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-info cancel">Cancel</button>
                                    <button type="submit" class="btn btn-info save">Save & Proceed to Pay</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $("#id_department").change(function(){
                var url=$("studentForm").attr("data-branch-url");
                var departmentId=$(this).val();

                $.ajax({
                    url: url,
                    data:{
                        'department':departmentId,
                    },
                    success:function(data){
                        $("#id_branch").html(data);
                    }
                });
            });
        </script>

      {% endblock content %}

0 个答案:

没有答案