Use PHPRPC to implement Ajax cascade drop-down menu

The cascade drop-down menu selects one item from one drop-down menu, and the content of the corresponding drop-down menu changes accordingly.

In general, the simplest thing is to submit a form each time you select and refresh the entire page. This is also the worst user experience.

The other is to load all options into the JavaScript array of the entire page when loading for the first time, and then connect them through JavaScript For control. When the data volume is small, this is a good way to achieve no refreshing and fast, but when the entire data volume is very large, this method will make the first loading very slow.

In addition, ajax (static dynamic website) is used to load only the content of the first menu. When a user selects an item of the first menu, then, use xml (standardization is getting closer and closer) HttpRequest to obtain the second-level menu content corresponding to the corresponding options. This method works best, but the traditional method is used to write such ajax (static dynamic website) programs with a large amount of code. In addition, if the design is poor, the reusability of the program that the server returns the menu content will also be poor.

However, in this article, you will see how simple it is to use php (as the mainstream development language) RPC to achieve this ajax (static dynamic website) effect, it also has a very high reusability.

This article takes the provincial/municipal cascade drop-down menu as an example. For the convenience of the example, this article uses the SQLite database, because this file-type database is easier to deploy, and the query efficiency is very high (of course, the efficiency of creating the database is not high, but only once, the content of the database in the program remains unchanged), but the server needs to install the SQLite extension.

There are only two tables in this database, one province table and one city table. In the province table, only the id and name fields are available, which are the province id (primary key) and province name. The city table contains three fields: id, name, and pid. id indicates the city number, name indicates the city name, and pid indicates the province id of the city, which corresponds to the province id in the province table.

The Program for creating the database is not provided here. It is included in the instance download provided later.

Next let's take a look at how simple the server that creates this program is. To improve reusability, we divide the server end into two files, one of which is function. php (as the mainstream development language) and rpc. php (as the mainstream development language ). Function. php (as the mainstream development language) defines the actual remote call function, but they can also be used as local function calls on the server side, you will find that they are no different from common functions on the server:

Download: function. php (as the mainstream development language)
<? Php (as the mainstream development language)
$ Sqlite = new SQLiteDatabase (area. db );
 
Function get_province (){
Global $ sqlite;
$ SQL = "select * from province order by id ";
Return $ sqlite-> arrayQuery ($ SQL, SQLITE_ASSOC );
}
 
Function get_city ($ pid ){
Global $ sqlite;
$ Pid = sqlite_escape_string ($ pid );
$ SQL = "select * from city where pid = $ pid order by id ";
Return $ sqlite-> arrayQuery ($ SQL, SQLITE_ASSOC );
}
?>
Rpc. php (as the mainstream development language) is simpler. It is an interface provided to the client for calling. It has only three lines of statements:

Download: function. php (as the mainstream development language)
<? Php (as the mainstream development language)
Require_once (function. php (as the mainstream development language ));
Require_once (php (as the mainstream development language) rpc_server.php (as the mainstream development language ));
New php (as the mainstream development language) rpc_server (array (get_province, get_city ));
?>
The last sentence specifies the functions to be exposed to the client. Only the specified function client can be called to ensure the security of the server.

This completes the creation of the server. You will find that the server is only responsible for querying the data and returning it to the client. The rest will not be processed.

Now let's take a look at the client. Although the client is very simple, I still divide it into two files, one js file and one html file, you will find that php (as the mainstream development language) RPC is not required for clients (as the mainstream development language ).

Download: area. js
// Create a php (as the mainstream development language) rpc client object rpc
Php (as the mainstream development language) rpc_client.create (rpc );
 
Var city = []; // used to cache loaded city Data
 
/*
* Clear the select option. This method can be reused.
*
* So: select object to clear options
*
*/
Function clear_select (so ){
For (var I = so. options. length-1; I>-1; I --){