如何使用django中的ajax从模板文件接收数据?

时间:2016-06-22 09:25:21

标签: python django django-views

我在模板文件中有一些复选框字段。所有选中的值都应该发送到视图文件。我使用ajax来阻止页面重新加载。如何将这些数据发送到后端(views.py)?

我的模板文件

<script type="text/javascript">
$(document).ready(function() {
    $("#myform").submit(function(event) {
        event.preventDefault();
        var category = [];
        $('input[type="checkbox"]:checked').each(function(i){
            category[i] = $(this).val();
            });

        $.ajax({
            url :'/welcome_user/',  
            type : "GET", 
            data : { 
                category_name : category,
            },
            success : function() {
                console.log('Success'); 
            },
            error : function() {
                console.log('Failure'); 
            }
        });
    })
});
</script>
</head>
<body>
    <form id="myform">
        <p>Categories</p>
        {% for i in My_Cat %}
            <input id="category_id" name="category_name" type="checkbox" 
            value="{{i.category}}" >{{i.category}}<br>
        {% endfor %}
        <input id="submit" type="button" value="Go"/>
    </form>
</body>

views.py,

def welcome_user(request): 
    categories = Add_cat.objects.all()   

    if 'category_name' not  in request.GET:
        my_products = Add_prod.objects.all()
        context = { 
                "My_Cat":categories,
                "products":my_products    
        }
        if request.is_ajax():
            print "Hello world"
            print request.GET.get('category_name') #getting undefined


    if 'category_name'  in request.GET:
        filter_category = request.GET.getlist('category_name')
        my_products = Add_prod.objects.filter(cat__category__in = filter_category)

        context = { 
                "My_Cat":categories,
                "products":my_products    
        }      
    return render(request,"welcome-user.html",context)

我没有收到任何错误。如果我检查了两个复选框,则无法识别它。这就是我在控制台中看到的内容。

"GET /welcome_user/?category_name%5B%5D=Economics&category_name%5B%5D=Kids HTTP/1.1" 200 5743

1 个答案:

答案 0 :(得分:0)

尽量不要混合。如果您想通过ajax提交内容,请不要使用submit输入。

使用:

<input id="submit" type="button" value="Go"/>

而不是:

<input type="submit" value="Go"/>

然后在你的JS: $("#submit").click(function(event) { ... });

<强>更新

再次阅读所有内容,我发现这里存在许多误解。我建议你有两个函数,一个用于视图,另一个用于ajax请求。我还怀疑你是否真的想要使用ajax,在这种情况下你应该从tutorial或普通的submition开始。