ThinkPHP usage tips-ThinkPHP + Ajax implement two-level linkage drop-down menu

The data in the linkage menu exists in the Database. You can add, delete, modify, and modify menu data at any time without modifying the Code. At the same time, after two levels are implemented, three levels can be implemented, level 4... And other associated menus

The data in the linkage menu exists in the Database. You can add, delete, modify, and modify menu data at any time without modifying the Code. At the same time, after two levels are implemented, three levels can be implemented, level 4... And other associated menus

The first is the database design. The category table is cate.

I am working on the secondary Association of classified data. The fields required for the data are: id, name (Chinese name), pid (parent id ).

Parent id settings: if the data does not have the upper level, the parent id is 0. If there is a higher level, the parent id is the id of the upper level.

After the database has content, you can start to write code for implementation of level-2 Association.

First, obtain all the data with a pid of 0 in php in the background, save it to $ cate, and thenUse foreach for loop output.Html code:The Code is as follows:
Select a type

{$ V. ca_name}


Tags:

Ajax code:

The Code is as follows:

$ ('# Type'). click (function (){
$ (This). change (function (){
Var objectModel = {};
Var value = $ (this). val ();
Var type = $ (this). attr ('id ');
ObjectModel [type] = value;
$. Ajax ({
Cache: false,
Type: "POST ",
Url: site. web + "lable ",
DataType: "json ",
Data: objectModel,
Timeout: 30000,
Error: function (){
Alert (site. web + "lable ");
},
Success: function (data ){
$ ("# Lables"). empty ();
Var count = data. length;
Var I = 0;
Var B = "";
For (I = 0; I B + =" "+ Data [I]. ca_name +"";
}
$ ("# Lables"). append (B );
}
});
});
}
);

Ajax code is triggered after the first layer type change. The main parameters of the ajax method include:

1. url: the address for receiving ajax requests from the background;

2. data: The data uploaded to the background, which is generally transmitted in json format. Here, the id value of the selected class is passed.

3. type: transfer method, which has get and post methods. I usually use post to transmit more data than get, which is more secure;

4. error: Method for ajax execution failure;

5. success: The method for successful ajax execution, that is, the callback function. When executing success, I first cleared the content of the second drop-down menu with empty () and then output the data obtained from the background.

The following is the page on which Thinkphp receives and processes ajax data.

The Code is as follows: