Shulou(Shulou.com)06/03 Report--

This article shows you how to use $. Get () to request data asynchronously from the database according to different options. The content is very detailed. Interested friends can refer to it and hope it will be helpful to you.

Ajax greatly improves the user experience and is essential for web2.0 and an essential skill for front-end developers.

This example is that when you select a programming language from the select drop-down box, asynchronously request a different function API description depending on the option. This feature is extremely common in today's web applications.

Let's first take a look at the structure of $.get ()

The code is as follows:

Get (url, [, data], [, callback] [, type]) / / url: the URL address of the requested HTML page; / / data (optional), the key/value data sent to the server is appended to the request URL as QueryString; / / callback (optional): callback function when loaded successfully (this method is called only if the return status of Response is success / / type (optional): the server returns the content format, including xml,html,script,json,text and _ default

First create the examplDB database, create the language and functions tables, and the SQL is as follows

The code is as follows:

CREATE TABLE IF NOT EXISTS language (id int (3) NOT NULL AUTO_INCREMENT, languageName varchar (50) NOT NULL, PRIMARY KEY (id)); CREATE TABLE IF NOT EXISTS functions (id int (3) NOT NULL AUTO_INCREMENT, languageId int (11) NOT NULL, functionName varchar (64) NOT NULL, summary varchar (128) NOT NULL, / / functional Overview example text NOT NULL, / / example PRIMARY KEY (id))

Here is the SQL that inserts the data

The code is 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 an XML file into an object','$xml = simplexml_load_file ('test.xml'');\ r\ nprint_r ($xml) \ r\ n'), (2, 1, 'array_push',' Push one or more elements onto the end of array','$arrPets = array ('Dog'',' 'Cat'',' 'Fish'');\ r\ narray_push ($arrPets,' Bird'',''Rat'');\ r\ n'), (3, 1,' ucfirst', 'Make a string''s first character uppercase',' $message = 'have a nice day \ r\ n$message = ucfirst ($message); / / 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\ necho' Mail sent'';\ r\ n}\ r\ nelse\ n {\ r\ necho '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 an 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\ nalert (' 'click happened'');\ r\ n});\ 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','('myClass yourClass'''). AddClass ('myClass yourClass'');')

These are relatively simple SQL operations, and you can code them when everything is ready. There are two script files, one index.php and one results.php for processing requests. Write index.php first.

The code is as follows:

Body {font-family: "Trebuchet MS", Verdana, Arial; width:600px;} div {background-color:#f5f5dc;}

Select a languae select

(function () {$('# selectLanguage') .change (function () {if ($(this). Val () = =') return; $.get ('results.php', {id: $(this). Val ()}, function (data) {$(' # result') .html (data);});})

Introduce jquery, add a change event handler to # selectLanguage, and put it in index.php before the end of body

The code is as follows:

(function () {$('# selectLanguage') .change (function () {if ($(this). Val () = =') return; $.get ('results.php', {id: $(this). Val ()}, function (data) {$(' # result') .html (data);});})

Here is results.php. It first connects to the database, then takes the index.php and sends it to id, selects the corresponding programming language record in the database according to id, and puts each record in the ul list.

The copy code is as follows:

Now that all the code has been written, take a look at the final effect.

Such a simple effect came out.

About how to use $. Get () to share data asynchronously from the database according to different options. I hope the above can be helpful and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.