tp5.1+mysql+ajax实现三级联动

题记:说道三级联动现在想想很简单,我搞这个东西搞了一天一夜,三点多还一点头绪都没有,网上找了很多资料,但是都是没啥用~~后来在大佬们的提示下,才算勉强完成。

现在回想下来,关键是我对ajax一窍不通。这里我想说一下的是,如果你和我一样ajax一窍不通,我建议你先去看一下ajax post和get 教程 http://www.runoob.com/jquery/jquery-ajax-get-post.html(原生ajax敲起来很累,直接建议你学jQuery)

1.话不多说,进入正题:首先建立三张表,省市县,关联关系(省表)如下图1所示

图1

2.表设计完以后建立数据库连接(我是基于tp框架建立的这里就给各位看一下目录结构,具体数据库连接略)图2


图2

3.先定义路由(小功能我就不定义了,直接访问控制器的具体方法),画好页面如图3三个select


图3

4.定义控制器如图4,我这里上来先把省份全部查出来,直接强塞给view,然后见图3,foreach省份

图4

5.图5我们可以看见变量出全国省份(直辖市区),以及value值(数据库的省份id)

图5

6.重点来了,因为select不是表单,故而不能post或者get所以只能通过ajax获取value,并通过json格式传到后台,后台获取到省的id,再去city表查对应的城市如图6.先写ajax传出省份id


图6

7.后台获取到省份id后,立马做出处理,如图7,详细解释看红字


图7

8.此时后台返回了json格式的标签,我们要在success里面处理这个标签,把他替换到城市的那个标签里面如图8,这里关于jQuery的.html方法不做解释,如果这都不会,那我也救不了你~~~~

图8

9.我们来看一下chrome控制台如图9,很明显,这边的option已经通过json返回来了,用jQuery.html方法直接替换掉输出值,


图9

10.县也是一样的实现,获取cityid,再次走一遍刚刚的方法,重点就是理解ajax!!!

关于三级联动,我已经上传到git上1072849958,具体代码,自己多敲两边,记得follow me~~

本次三级联动就说道这里,下次可能会讲织梦专题~

你可能感兴趣的:(tp5.1+mysql+ajax实现三级联动)