django + jquery 实现二级联动
我是一个django新手,想写一个省市的二级联动,结果在网上找了N久,要么是不全,要么是太复杂看不懂,最终实现了二级联动,分享给django web开发新手。
参考博客http://sarlmolapple.is-programmer.com/posts/25844.html文中部分代码为该博客中复制
第一步:创建project和app这里就不写了,相信只要是刚开始接触django的都能知道如何创建,我这里的ProjectName是testccc,AppName是app
第二步:创建model(app/models.py)并插入数据,插入数据就不啰嗦了
fromdjango.dbimportmodelsclassProvince(models.Model):provinceName=models.CharField(max_length=20)classCity(models.Model):cityName=models.CharField(max_length=20)provinceID=models.ForeignKey(Province)
第三步:创建form(app/forms.py)
#coding=utf8fromdjangoimportformsfrom.modelsimport*provinces=Province.objects.all()PROVINCE_CHOICES=[]forprovinceinprovinces:PROVINCE_CHOICES.append([province.id,province.provinceName])classmyForm(forms.Form):province=forms.ChoiceField(widget=forms.Select(attrs={'class':'select','onChange':'getCityOptions(this.value)'}),choices=PROVINCE_CHOICES,label=u'选择省')city=forms.ChoiceField(widget=forms.Select(attrs={'class':'select'}),label=u'选择市')#如果需要3级联动,在city中也添加onChange参数指定就jquery函数
第四步:创建模版(app/templates/test.html)
<scriptsrc="/js/jquery.js"type="text/javascript"></script><scripttype="text/javascript">functiongetCityOptions(province_id){$.ajax({type:"GET",url:"/getcitylist?provinceID="+province_id,dataType:'json',success:function(data,textStatus){varcitySelect=document.getElementById("id_city");for(vari=citySelect.options.length-1;i>-1;i--){citySelect[i]=null;}if(data.length>0){$("#id_city").show();for(i=0;i<data.length;i++){citySelect.options[i]=newOption();citySelect.options[i].text=data[i].label;citySelect.options[i].value=data[i].text;}}else$("#id_city").hide();}})}</script><label>省市:</label>`form`
第五步:创建view函数(app/views.py)
fromdjango.shortcutsimportrender_to_responsefromdjango.httpimportHttpResponsefromtestccc.app.modelsimport*fromtestccc.app.formsimport*#1.5以前的版本fromdjango.utilsimportsimplejson#1.5以后的版本importjsondefcity_list(request,provinceID):city_list=[]province=request.GET['provinceID']citys=City.objects.filter(provinceID=province)forcityincitys:c={}c['label']=city.cityNamec['text']=city.idcity_list.append(c)#1.5以前的版本returnHttpResponse(simplejson.dumps(city_list),mimetype='application/json')#1.5以后的版本returnHttpResponse(json.dumps(city_list),mimetype='application/json')deftest(request):form=myForm()returnrender_to_response('test.html',locals())
第六步:创建url (usrs.py)
urlpatterns=patterns('',#由于在html模版中调用了静态jquery.js文件,所以首先需要在url中指定js静态文件的路径,这个路径也可以用来调用css和img文件url(r'^js/(?P<path>.*)$','django.views.static.serve',{'document_root':'//root/workspace/testccc/testccc/static/js'}),#js函数调用的urlurl(r'^getcitylist/(.*)$','testccc.app.views.city_list'),url(r'^test/$','testccc.app.views.test'),)
第七步:启动并测试
访问 http://localhost/test
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。