Jquery + php + mysql second-level linkage example with database

Last Update:2013-11-17 Source: Internet

Author: User

Tags mysql tutorial

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Jquery + php + mysql second-level linkage example with the database. This is a second-level linkage menu of the city that uses juqery to interact with php in real time. In the past, we used js to present the second-level linkage menu, now let's use the jquery + php + mysql database for instance.

Jquery + php tutorial + mysql tutorial second-level linkage example with database tutorial
This is a second-level linkage menu of the city that uses juqery to interact with php in real time. In the past, we used webpage special effects to present the second-level linkage menu, now let's use the jquery + php + mysql database for instance.
-->

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html xmlns = "http://www.bKjia. c0m/1999/xhtml">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Script type = "text/Webpage effects" src = "jquery. webpage effects"> </script>
<Script type = "text/Webpage effects">
$ (Document). ready (function (){
// Get provinces
$. Get ("getcontent. php", {category: 'province '},
Function (data ){
Certificate ('{province'}.html (data );
});

// Get citys
$. Get ("getcontent. php", {category: 'city '},
Function (data ){
Certificate ('{city'}.html (data );
});

// Province onchange
$ ('# Province'). change (function (){
Var province = $ (this). val ();
$. Get ("getcontent. php", {category: 'city', province: province}, function (data ){
Certificate ('{city'}.html (data );
});
});

});
</Script>

<Title> second-level linkage example </title>
</Head>
<Body>

<Form action = "check. php" method = "post">
<Select name = "province" id = "province">
</Select>
<Select name = "city" id = "city" style = "width: 100px;">
</Select>
<Input type = "submit" value = "submit now"/>
</Form>
</Body>
</Html>

Getcontent. php code

<? Php
// Author: Xiamen Feiyu
// Qq: 710788018
// Email: tochenwei@163.com
Define (host, 'localhost ');
Define (user, 'root ');
Define (pw ,'');
Define (db, 'test ');

$ Connect = mysql_connect (host, user, pw)
Or die ('could not connect to mysql Server ');

Mysql_select_db (db, $ connect)
Or die ('could not select database .');
// Set the query encoding. If no query is set, garbled characters may occur.
Mysql_query ('set names utf8 ;');

Switch ($ _ request ['category ']) {
// Display all provinces in the database
Case 'province ':
$ Str = "<option value = '0'> select a province </option> ";
$ SQL = "select * from province ";
$ Result = mysql_query ($ SQL) or die (mysql_error ());

If (mysql_num_rows ($ result)> 0 ){
While ($ row = mysql_fetch_array ($ result )){
// Print_r ($ row );
$ Str. = "<option value = '". $ row ['id']. "'>". $ row ['name']. "</option> ";
}
}
Echo $ str;
Mysql_free_result ($ result );
Break;

// Display the city
Case 'city ':
$ Str = "<option value = '0'> select a city </option> ";
If ($ _ request ["province"]! = ""){
// Obtain the city according to the province
$ SQL = "select * from city where province_id =". $ _ request ['province '];
$ Result = mysql_query ($ SQL) or die (mysql_error ());

If (mysql_num_rows ($ result)> 0 ){
While ($ row = mysql_fetch_array ($ result )){
$ Str. = "<option value = '". $ row ['id']. "'> ". $ row ['city _ name']. "</option> ";
}
}
Mysql_free_result ($ result );
} // End of if
Echo $ str;
Break;

} // End of switch

/*
Based on the above examples, we can see that this is actually the no-refreshing level-2 menu of the php + ajax instance, but the method used is different.
*/

?>

City. SQL
Use 'test ';

/* Table structure for table 'city '*/

Drop table if exists 'city ';

Create table 'city '(
'Id' int (4) not null auto_increment,
'City _ name' varchar (255) not null,
'Province _ id' int (4) not null,
Primary key ('id ')
) Engine = innodb default charset = utf8;

/* Data for the table 'city '*/

Insert into 'city' ('id', 'city _ name', 'province _ id') values (1, 'fuzhou ', 1), (2, 'xiamen ', 1), (3, 'longyan ', 1), (4, 'zhangzhou', 1), (5, 'shenzhen ', 2), (6, 'guangzhou ', 2 );

Provice. SQL
Create database /*! 32312 if not exists */'test '/*! 40100 default character set utf8 */;

Use 'test ';

/* Table structure for table 'province '*/

Drop table if exists 'province ';

Create table 'province '(
'Id' int (4) not null auto_increment,
'Name' varchar (255) not null,
Primary key ('id ')
) Engine = innodb default charset = utf8;

/* Data for the table 'province '*/

Insert into 'vince '('id', 'name') values (1, 'fujian province'), (2, 'guangdong province ');

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More