Python Django-为什么在使用ajax之后，它会变成一个空页面

页面上的功能包括：

• 用户在表单上输入一些信息
• 在不刷新的情况下，右侧可以根据用户输入显示一些查询结果（销售）

在添加ajax功能之前，页面可以显示表单和表。但是在使用ajax之后，页面变为空

有人能帮忙查查原因吗？提前谢谢

url

url(r'^result_list/$',ResultView.as_view(),name='result'),

<style>...CSS part
</style>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#InputForm").submit(function() { // catch the form's submit event
    var region= $("#id_region").val();
    var company= $("#id_company").val();

        $.ajax({
        data: $(this).serialize(), // get the form data
        type: $(this).attr('post'),
        dataType: 'json',
        url: "dupont_list/",
        success: function(data) {
        var html = "<table>"
        html += "<td>"+data['sales__sum']+"</td>"
        html += "</table>"
        $("#result").html(html);

            html += "</table>"
            $("#result").html(html);
        }   
        return false;
    });
})
</script>

<form id="InputForm" method="post" action="">   #here is the data entry form
        {% csrf_token %}

        <!--enter the company name--> 
        <div class="field">
            {{ form.company.errors }}
            <label id="id_company" name="company" for="{{ form.company.id_for_label }}">Company:</label>
            {{ form.company }}
        </div>

        <!--select region-->
        <div class="field" >
            <label> Select the Region:
            {{ form.region }}
                {% for region in form.region.choices %}
                     <option value="region" name= "region" id="id_region">{{region}} </option>
                {% endfor %}
            </label>
        </div>

        <!--submit-->
        <p><input type="button" value="Submit" /></p></div>
    </form> 
</div>

    <div id="result" class="result">   <!--Showing the filtered result in database-->
    <table>
    <tr><b>Sales</b></tr>
    <td> {{sales.sales__sum}}</td>

    <tr><b>Employee</b></tr>
    <td> {{employee.employee__sum}}</td>
    </table>

型号.py

class Input(models.Model):
    company=models.CharField(max_length=100)
    region=models.CharField(max_length=100)   

class Result(models.Model):
    sales=models.IntegerField(blank=False,null=False)

视图.py

class Input(models.Model):
    company=models.CharField(max_length=100)
    region=models.CharField(max_length=100)   

class Result(models.Model):
    sales=models.IntegerField(blank=False,null=False)

从django.views.generic.list导入ListView 从django.core导入序列化程序

class ResultView(ListView):
    context_object_name = 'result_list'
    template_name = 'result_list.html'

    def get_queryset(self):
        return Result.objects.all()

    def post(self, request, *args, **kwargs):
        form = InputForm(request.POST)
        if form.is_valid():
            if self.request.is_ajax():
                company = form.cleaned_data['company']
                region = form.cleaned_data['region']

                queryset=Result.objects.filter(region=region).aggregate(Sum('sales'))
                return HttpResponse(json.dumps(queryset))

        else:
             return HttpResponse(form.errors)

    '''def get_context_data(self, **kwargs):
        context = super(ResultView, self).get_context_data(**kwargs)
        context["sales"] = self.get_queryset().aggregate(Sum('sales'))'''

html

url(r'^result_list/$',ResultView.as_view(),name='result'),

<style>...CSS part
</style>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#InputForm").submit(function() { // catch the form's submit event
    var region= $("#id_region").val();
    var company= $("#id_company").val();

        $.ajax({
        data: $(this).serialize(), // get the form data
        type: $(this).attr('post'),
        dataType: 'json',
        url: "dupont_list/",
        success: function(data) {
        var html = "<table>"
        html += "<td>"+data['sales__sum']+"</td>"
        html += "</table>"
        $("#result").html(html);

            html += "</table>"
            $("#result").html(html);
        }   
        return false;
    });
})
</script>

<form id="InputForm" method="post" action="">   #here is the data entry form
        {% csrf_token %}

        <!--enter the company name--> 
        <div class="field">
            {{ form.company.errors }}
            <label id="id_company" name="company" for="{{ form.company.id_for_label }}">Company:</label>
            {{ form.company }}
        </div>

        <!--select region-->
        <div class="field" >
            <label> Select the Region:
            {{ form.region }}
                {% for region in form.region.choices %}
                     <option value="region" name= "region" id="id_region">{{region}} </option>
                {% endfor %}
            </label>
        </div>

        <!--submit-->
        <p><input type="button" value="Submit" /></p></div>
    </form> 
</div>

    <div id="result" class="result">   <!--Showing the filtered result in database-->
    <table>
    <tr><b>Sales</b></tr>
    <td> {{sales.sales__sum}}</td>

    <tr><b>Employee</b></tr>
    <td> {{employee.employee__sum}}</td>
    </table>

…CSS部分
$（文档）.ready（函数（）{
$（“#InputForm”）.submit（函数（）{//捕获表单的提交事件
var region=$（“#id_region”）.val（）；
var company=$（“#id_company”）.val（）；
$.ajax({
数据：$（this）.serialize（），//获取表单数据
类型：$（this.attr（'post'），
数据类型：“json”，
url:“杜邦列表/”，
成功：功能（数据）{
var html=“”
html+=“”+数据['sales\uu sum']+“”
html+=“”
$（“#结果”）.html（html）；
html+=“”
$（“#结果”）.html（html）；
}   
返回false；
});
})
#这是数据输入表
{%csrf_令牌%}
{{form.company.errors}
公司：
{{form.company}}
选择区域：
{{form.region}}
{form.region.choices%中的区域为%s}
{{区域}}
{%endfor%}

销售额
{{sales.sales{u sum}
雇员
{{employee.employee{u sum}}

我会选择一个

FormView

：

class ResultView(FormView):

    context_object_name = 'result_list'
    template_name = 'result_list.html'
    form_class = InputForm

    def get_context_data(self, **kwargs):
        context = super(ResultView, self).get_context_data(**kwargs)
        context["results"] = Result.objects.all()
        context["sales"] = context.results.aggregate(Sum('sales'))
        return context

    def form_valid(self,form):
        company = form.cleaned_data['company']
        region = form.cleaned_data['region']
        queryset = Result.objects.filter(region=region).aggregate(Sum('sales'))
        return HttpResponse(json.dumps(queryset))

---

这样，如果表单有效并返回自定义内容响应，您就绕过了

get\u context\u data

和

get\u queryset

方法

Hi@SebastianWozny，非常感谢~~但是仍然是一个空页面，你认为我的html中有什么错误吗？我想我忘记返回上下文了。现在试试。还可以使用中的开发人员工具您的浏览器将检查网络请求以及服务器返回的内容。它正在返回“主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验造成有害影响。有关更多帮助，请检查。”我已成功设置“async:true”，但仍然存在错误。让我们继续。