Ajax has greatly improved the user experience, which is essential for web2.0 and is an essential skill for front-end developers.
The example is this, when the programming language is selected from the Select dropdown box, the different function API descriptions are requested asynchronously depending on the options. This functionality is common in Web applications today.
Let's take a look at the structure of $.get ()
Copy Code code as follows:
$.get (URL, [, Data], [, Callback] [, type])
URL: The URL address of the requested HTML page;
Data (optional), which is sent to the server as a querystring appended to the request URL Key/value;
Callback (optional): The callback function when the load succeeds (the method is invoked only if the response return state is success);
Type (optional): Server-side return content format, including Xml,html,script,json,text and _default
First create the EXAMPLDB database, build the language and functions tables, SQL as follows
Copy Code code as follows:
CREATE TABLE IF not EXISTS language (
ID int (3) not NULL auto_increment,
LanguageName varchar (m) not NULL,
PRIMARY KEY (id));
CREATE TABLE IF not EXISTS functions (
ID int (3) not NULL auto_increment,
LanguageID Int (one) not NULL,
functionname varchar () not NULL,
Summary varchar (128) Not NULL,//Feature overview
Example text not NULL,//Example
PRIMARY KEY (id));
The following is the SQL that inserts the data
Copy Code code as follows:
INSERT into language (ID, languagename) VALUES
(1, ' PHP '),
(2, ' jQuery ');
INSERT into functions (ID, LanguageID, functionname, Summary, example) VALUES
(1, 1, ' simplexml_load_file ', ' interprets ' XML file into an object ', ' $xml = simplexml_load_file (' Test.xml '); \r\nprin T_r ($xml); \ r \ n '),
(2, 1, ' Array_push ', ' push one or more elements onto "End of array ', ' $arrPets = Array (' Dog ', ' Cat ', ' ' Fish '); \r\ Narray_push ($arrPets, ' Bird ', ' ' Rat '), \ r \ n '),
(3, 1, ' ucfirst ', ' Make a string ' ' s-character uppercase ', ' $message = ' have a nice day;\r\n$message = Ucfirst ($mess Age); Output:have A Nice day\r\n '),
(4, 1, ' mail ', ' used to send email ', ' $message = ' Example message for mail '; \r\nif (mail (' test@test.com ', ' Test Subject ') ', $message)] \r\n{\r\n Echo ' Mail sent '; \r\n}\r\nelse\r\n{\r\n Echo ' Sending of mail failed '; \r\n}\r\n '),
(5, 2, ' $.get ', ' Load data from the "server using a HTTP GET request. ', ' $.ajax ({\ r \ n url:url,\r\n data:data,\r\n success : success,\r\n datatype:datatype\r\n}), \ r \ n '),
(6, 2, ' hover ', ' hover method accepts 2 functions as parameters which execute Alternativelt when mouse enters and leaves a n element. ', ' $ (selector). Hover (\r\nfunction () \r\n{\r\n//executes on mouseenter\r\n},\r\nfunction () \r\n{\r\n// Executes on mouseleave\r\n});
(7, 2, ' bind ', ' Attach a handler to an event for the elements. ', ' $ (Element). bind (' click ', Function () \r\n{\r\n alert (" Click happened '); \ r \ n}),
(8, 2, ' jquery.data ', ' Store arbitrary data associated with the specified element. ', ' jquery.data (element, key, value);
(9, 1, ' Add Class ', ' Adds a class ', ' (' P '). addclass (' MyClass yourclass ');
are simpler SQL operations and can be coded after everything is ready. A total of two script files, a index.php, a results.php for processing requests, first write index.php
Copy Code code as follows:
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
Body {font-family: "Trebuchet MS", Verdana, Arial; width:600px;}
div {background-color: #f5f5dc;}
</style>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<body>
<?php
$mysqli = new mysqli (' localhost ', ' root ', ' passwd ', ' exampledb ');/change passwd to your database password
if (Mysqli_connect_errno ())
{
Die (' Unable to connect ');
}
Else
{
$query = ' SELECT * from language '; This starts with the core code, which is a very simple statement, mostly in language, and then loops out to the Select option
if ($result = $mysqli->query ($query))
{
if ($result->num_rows > 0)
{
?>
<p>
Select a Languae
<select id= "Selectlanguage" >
<option value= "" >select</option>
<?php
while ($row = $result->fetch_assoc ())//The ID of the programming language is the value of option, with the language as the option.
{
?>
<option value= "<?php echo $row [' id '];? > "><?php echo $row [' LanguageName '];?></option>
<?php
}
?>
</select>
</p>
<p id= "Result" ></p>
<?php
}
Else
{
Echo ' No records found ';
}
$result->close ();
}
Else
{
Echo ' Error in query: $query. ' $mysqli->error;
}
}
$mysqli->close ();
?>
<script type= "Text/javascript" >
$ (function () {
$ (' #selectLanguage '). Change (function () {
if ($ (this). val () = "") return;
$.get (
' Results.php ',
{ID: $ (this). Val ()},
function (data) {
$ (' #result '). HTML (data);
}
);
});
});
</script>
</body>
Introduce jquery, add the Change event handler to #selectlanguage, and place it in the index.php before the body ends
Copy Code code as follows:
<script src= "Scripts/jquery.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' #selectLanguage '). Change (function () {
if ($ (this). val () = "") return;
$.get (
' Results.php ',
{ID: $ (this). Val ()},
function (data) {
$ (' #result '). HTML (data);
}
);
});
});
</script>
Here's the results.php. It connects to the database first, then obtains index.php to send to the ID, according to the ID in the database selects the corresponding programming language record, and puts each record in the UL list
Copy Code code as follows:
<?php
$mysqli = new mysqli (' localhost ', ' root ', ' passwd ', ' exampledb '); You'll also need to rewrite the passwd with your database password.
$resultStr = ';
$query = ' SELECT functionname, Summary, example from functions where LanguageID = '. $_get[' id ']; $_get[' ID ' is the ID sent by $.get () in index.php
if ($result = $mysqli->query ($query))
{
if ($result->num_rows > 0)
{
$resultStr. = ' <ul> ';
while ($row = $result->fetch_assoc ())//is similar to index.php's statement, it also obtains records from the database and then formats the output
{
$resultStr. = ' <li><strong> ' $row [' functionname ']. </strong>-'. $row [' summary '];
$resultStr. = ' <div><pre> ' $row [' example ']. </pre></div> '. ' </li> ';
}
$resultStr. = ' </ul> ';
}
Else
{
$resultStr = ' nothing found ';
}
}
Echo $resultStr;
?>
Now all the code is written, look at the final effect
Such a simple effect comes out.
