This article mainly introduces the drop-down menu for secondary linkage between ThinkPHP and Ajax. It has certain reference value. Now I share it with you. Friends in need can refer to the data existence of
linkage menu. In the database, the menu data can be changed at any time by adding, deleting, modifying, or modifying the database without modifying the code. At the same time, after achieving level 2, level 3 and level 4 can also be achieved. . . Wait for the related menu
The first is the design of the database. The classification table is called cate.
What I am doing is the second-level linkage 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 an upper level, the parent id is 0. If there is an upper level, the parent id is the id of the upper level.
After the database has content, you can start writing code to implement secondary linkage.
First get all the data with pid 0 in the background php, save it to $cate, and then use a foreach loop to output it in the first layer's
Html code:
<select name="type" size="1" id="type">
<option>请选择类型</option>
<foreach name='cate' item='v'>
<option value="{$v['ca_id']}">{$v.ca_name}</option>
</foreach>
</select>
标签：
<select name="lable" size="1" id="lables">
</select>Ajax code:
$('#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<count;i++){
b+="<option value='"+data[i].ca_id+"'>"+data[i].ca_name+"</option>";
}
$("#lables").append(b);
}
});
});
}
);The Ajax code is triggered after the first layer type is changed. The main parameters of the ajax method are
1 .url: The address for receiving ajax in the background;
2.data: The data passed to the background is usually passed in json; what is passed here is the id value of the selected class.
3.type: transfer method, there are get and post methods, I usually use post, which can transmit more data than get, and is more secure;
4.error: ajax execution Failure method;
5.success: The method for successful ajax execution, which is the callback function. When executing success here, I first use empty() to clear the contents of the second drop-down menu, and then output the data obtained from the background.
The following is the page where Thinkphp receives and processes ajax data.
//后台ajax验证 $result = array(); $cate =$_POST['type']; $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select(); $this->ajaxReturn($result,"JSON");
Thinkphp's I() method can actually be regarded as $_POST[], so as to obtain the first layer selection passed by ajax. The id of the content, then, obtain its subclass, and then use ajaxReturn() to return it to ajax. Here, the return data is set in json form, so ajax will receive the data in json form
Native PHP return data method :
The code is as follows:
//搜索结果为$result ..... echo json_encode($result);
This completes the implementation of the two-level linkage drop-down menu. It should be noted that the url must be correct, and there must be a return value when received in the background, otherwise ajax The success method will not be executed.
The above is the entire content of this article. Thank you everyone for reading. Please pay attention to the PHP Chinese website for more content!
Related recommendations:
Real-time message push function implemented in PHP [based on anti-ajax push]
In How to use ajax to implement refresh-free paging in Thinkphp
The above is the detailed content of ThinkPHP and Ajax realize secondary linkage drop-down menu. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
