django的ajax应用

有这样一个需求，如果你要通过模态框添加应用，如果你用form表单提交，显然是可以的。但是有一个缺陷就是如上图，你点击了提交，而不管你的应用名称有没有写都会成功添加进去并跳转到form指定的页面，这显然有个不好的体验，用户不知道他提交的有没有问题，没有达到好的客户交流体验。

所以，用ajax很好的解决了这个问题。

views中的代码

def ajax_add_app(request):
    if request.method == 'POST':
        ret = {'status': True, 'error': None, 'data': None}
        # print(request.POST.get('user'))
        # print(request.POST.getlist('pwd'))
        app_name = request.POST.get('app_name')
        host_list = request.POST.getlist('host_list')
        print(app_name,host_list)
        if app_name and len(app_name) < 5:
            obj = models.Applicate.objects.create(name=app_name)
            obj.r.add(*host_list)
            ret['data'] = app_name + "添加成功"
            return HttpResponse(json.dumps(ret))
        else:
            ret['data'] = app_name + ": 为空或名字太长了"
            return HttpResponse(json.dumps(ret))

 

html中的ajax代码

 

$('#add_submit_ajax').on('click',function(){  
   // 通过ajaxSetup就可以设置全局的headers，这样所有的ajax都不要写headers了
    $.ajaxSetup({
        beforeSend:function(xhr,settings){
            xhr.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken'));   // 不用cookie的csrf "{{csrf_token}}"
            }
        });
    $.ajax({  
        url:'/ajax_add_app',  
        type:'POST',  
        // data:{'user':123,'pwd':['123',123]},   // data:{'user':123,'pwd':['123',123]}, 如果提交的数据有列表，那么要添加traditional:true,在views中用POST,getList来接收值  
        // traditional:true,  
        data: $('#add_form').serialize(),  // 获取form表单的所有value   #add_form 是form的id <form id="add_form">...</form>  
        {#                headers:{'X-CSRFtoken':$.cookie('csrftoken')},  // 把csrf发过去才能不403#}
		success:function(data){  // 这个data是上面的data发送给服务端后，服务端返回的值  
            var ret = JSON.parse(data);  
                        if(ret['status'])  
                        {alert(ret['data'])} 
                        else  
                        {alert(ret['error'])}  
        },  
        error:function(){  
            alert('error')  // 如果后端发生了未知错误(捕获到的错误不是未知错误)，则会执行这里。比如 return HttpResponse(json.dumps(a1qdwq))  
        }  
    })  
});  

 

 

 

点击确认后，就能将百度添加成功，并刷新页面。

 

如果你不想在ajax中每次写JOSN,parse，那么可以这样写

$('#add_submit_ajax').on('click',function(){
	$.ajax({
		url:'/ajax_add_app',
		type:'POST',
		data: $('#add_form').serialize(),
		dataType:'JSON',
		success:function (obj) {
			console.log(obj);
		},
	})
});

不过，这样jQuery内部把后端返回的值处理成了对象类型，