thinkphp use experience sharing-thinkphp + Ajax to achieve the 2-level Linkage drop-down menu _php Skills

Source: Internet
Author: User

The first is the design of the database. The classification table is called Cate.

I do is the classification of data two-level linkage, the data required fields are: Id,name (Chinese name), PID (parent ID).

setting of the Parent ID: If the data is not up to level, the parent ID is 0, and if there is a superior, the parent ID is the ID at the previous level.

After the database has the content, can begin to write the code, carries on the two level linkage realization.

First in the background PHP to get all the PID 0 data, save to $cate, and then in the first layer of <select> with a foreach loop output.

HTML code:

Copy Code code as follows:

<select name= "Type" size= "1" id= "type" >
<option> Please select Type </option>
<foreach name= ' cate ' item= ' V ' >
<option value= ' {$v [' ca_id ']} ' >{$v .ca_name}</option>
</foreach>
</select>
Label:
<select name= "lable" size= "1" id= "lables" >
</select>

Ajax Code:

Copy Code code 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<count;i++) {
b+= "<option value= '" +data[i].ca_id+ "' >" +data[i].ca_name+ "</option>";
}
$ ("#lables"). Append (b);
}
});
});
}
);

Ajax code triggers after the first layer type changes, and the main parameters of the Ajax method are

1.url: Background to receive AJAX address;

2.data: Data uploaded to the background, usually passed in JSON; the ID value of the selected class is passed here.

3.type: Pass method, have get and post method, I generally use post, can transmit more data than get, security is also higher;

4.error:ajax the method of execution failure;

5.success:ajax the method of executing successfully, which is the callback function. When I perform success here, I first empty the contents of the second Pull-down menu with empty () and then output the data from the background.

Here are the pages that thinkphp receive AJAX data and process

Copy Code code as follows:

Background Ajax validation
$result = Array ();
$cate =$_post[' type '];
$result = M (' cate ')->where (Array (' Ca_pid ' => $cate))->field (' Ca_id,ca_name ')->select ();
$this->ajaxreturn ($result, "JSON");

The thinkphp I () method can actually be viewed as $_post[] to get the ID of the first level of selection that Ajax passes over, then get its subclass and then return it to Ajax with Ajaxreturn (), which sets the return data in JSON form, So Ajax will receive the data in JSON form

How native PHP returns data:

Copy Code code as follows:

Search results for $result
.....
echo Json_encode ($result);

This completes the 2-level Linkage drop-down menu implementation, it should be noted that the URL must be correct, the background received also need to have return value, otherwise Ajax will not implement success method.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.