Jquery Ajax Various usage instructions detailed

jquery is so simple to load a page asynchronously:

JQuery AJAX Request

Request Description

$ (selector). Load (url,data,callback) loads the remote data into the selected element
$.ajax (options) loads the remote data into the XMLHttpRequest object
$.get (Url,data,callback,type) uses HTTP get to load remote data
$.post (Url,data,callback,type) uses HTTP post to load remote data
$.getjson (url,data,callback) uses HTTP get to load remote JSON data
$.getscript (Url,callback) loads and executes remote JavaScript files

(URL) The URL (address) of the data being loaded

(data) A key/value object sent to the server

(callback) The function that is executed when the data is loaded

(type) The types of data returned (Html,xml,json,jasonp,script,text)

(options) all key/value pairs for full AJAX requests

The code is as follows	Copy Code
$.ajax ({url: "/testl/index.html", Cache:false, Success:function (HTML) { $ ("#test"). Append (HTML); } });

or more simply:

The code is as follows	Copy Code
$ ("#test"). Load ("/test/index.html");

Send additional parameters as POST and display the information when successful.

JQuery Code:

The code is as follows	Copy Code
$ ("#feeds"). Load ("feeds.php", {limit:25}, function () {alert ("The last entries in the feed have been loaded");

Load and execute a JavaScript file: Load and execute test.js, and then display the information successfully.

JQuery Code:

The code is as follows	Copy Code
$.getscript ("Test.js", function () {alert ("Script loaded and executed.");});

jquery JSON code

JSON (JavaScript Object notation) is a lightweight data interchange format. Easy for people to read and write, but also easy to machine parsing and generation. JSON plays a very good role in the process of background interaction in the front. I hate the XML of the kind of complex data structure, hehe ~ ~ In fact, I did not have a very deep research on XML, just feel the use of JS operation of XML does not operate JSON convenient.

Did you finish the demo? Then look at the tutorial!

The code is as follows

Copy Code

Xhml <div style= "Z-INDEX:10; Position:absolute; Display:none "id=ajax_image> </DIV> <div id=box> <select id=letter> <option selected value= "" > Please select the first letter </OPTION> <option value=a>a</option > <option value=b>b</option> <option value=c>c</option> <option value=D>D</ option> <option value=e>e</option> <option value=f>f</option> <OPTION /option> <option value=h>h</option> <option value=i>i</option> <OPTION </OPTION> <option value=k>k</option> <option value=l>l</option> <option value=M> m</option> <option value=n>n</option> <option value=x>x</option></select> <select id=server> <option selected value= "" > Waiting for you to choose the first letter </OPTION></SELECT> </DIV>

example, I added two drop-down menus to two different IDs, the first #letter (on behalf of the first letter Drop-down menu), the second #server (on behalf of Warcraft Server Drop-down menu), I want the effect is when the first Drop-down menu, the second Drop-down menu will first become "Please wait ... Loading Data ", there will also be a ajax-loading picture, and then the second Drop-down menu will come out of Warcraft server information, is based on the first letter to obtain.

JS Code

The code is as follows

Copy Code

$ (function () { $ (' #letter '). Change (function () { var $letter _select = $ (this);//Select the jquery object for the first-letter Pull-down menu var $server _select = $ (' #server ');/the jquery object of the server's Drop-down menu if ($letter _select.val () = = "") {//If the initial "Select First letter" option is selected in the Order menu $server _select.empty (). Append (" <option value= "" > Waiting for you to choose the first letter </OPTION> "); return false; } $server _select.empty (). Append (" <option value= "" > Please wait a moment ... Loading Data </OPTION> //empties the server's Pull-down menu and joins a "Please wait ..." Loading Data "project var $tips = $ (' #ajax_image ');//This is the jquery object of the Ajax image var $position = $letter _select.offset ()//To get the position of the current operation $tips. CSS ("Top", $position. Top). css (' left ', $position. Left]. Show ()//Move the ajax-loading picture to the position of the current operation and let the picture appear $.getjson (' jquery_ajax_json_php/search_server.html?letter= ' + $letter _select.val (), function (JSON) { if (Json.length = = 0) {//No data found from the database $server _select.empty (). Append (" <option value= "" > Sorry, no data found </OPTION> ") }else{//successfully obtained data $server _select.empty ()//Empty the server's Drop-down menu $.each (Json,function (index,entry) {//using each method, traverse the JSON array index to represent the ordinal 0,1,2 ... entry represents the result object $server _select.append (" <option value= ' "+ entry.id +" ' > "+entry.name+" </OPTION> )//Inserts the obtained data into the server's Drop-down menu }); } $tips. Hide ()//hidden ajax-loading picture }) }) });

Here I bind a onchange event to the Drop-down menu for the first letter, and the AJAX approach is to use the Getjson method of jquery. There is already a look in the code, and I won't say more.

PHP code

The code is as follows

Copy Code

function Search_server () { Get parameters $letter = $this->input->get (' letter '); Querying data $server _list = $this->db->from (' Wow_server ')->like (' name ', $letter, ' after ')->get (); $return _result = Array (); if ($server _list->num_rows () > 0) { foreach ($server _list->result () as $server _obj) {//press the resulting result into a two-dimensional array $return _result[] = Array ( ' id ' => $server _obj->id, ' Name ' => $server _obj->name ); } } Sleep (1)//Let the program wait 1 seconds before returning data Echo Json_encode ($return _result); }

Finally attach the table information used

The code is as follows	Copy Code
CREATE TABLE ' Ci_wow_server ' ( ' id ' int (one) not NULL auto_increment, ' Name ' varchar ' not NULL DEFAULT ', PRIMARY KEY (' id '), KEY ' Idx_products_options_values_name_zen ' (' name ') ) Engine=myisam auto_increment=1163 DEFAULT Charset=utf8

Ajax Operational Functions

The JQuery Library has a complete Ajax compatibility suite. The functions and methods allow us to load data from the server without refreshing the browser.

Function description

Jquery.ajax () executes an asynchronous HTTP (Ajax) request.
. Ajaxcomplete () registers the handler to invoke when the Ajax request completes. This is an Ajax event.
. Ajaxerror () registers the handler to invoke when the Ajax request completes and an error occurs. This is an Ajax event.
. Ajaxsend () displays a message before the Ajax request is sent.
Jquery.ajaxsetup () sets the default value for future Ajax requests.
. Ajaxstart () registers the handler to invoke when the first Ajax request completes. This is an Ajax event.
. Ajaxstop () registers the handler to invoke when all Ajax requests are complete. This is an Ajax event.
. Ajaxsuccess () displays a message when the Ajax request completes successfully.
Jquery.get () loads data from the server using an HTTP GET request.
Jquery.getjson () loads JSON-encoded data from the server using an HTTP GET request.
Jquery.getscript () loads the JavaScript file from the server using an HTTP GET request, and then executes the file.
. Load () loads data from the server and then returns the HTML to the matching element.
Jquery.param () Creates a serialization representation of an array or object that is suitable for use in URL query strings or Ajax requests.
Jquery.post () loads data from the server using an HTTP POST request.
. Serialize () Serializes the form contents into strings.
. Serializearray () Serializes the form elements, returning the JSON data structure.