JQuery Address full-site AJAX case details, jqueryajax

JQuery Address full-site AJAX case details, jqueryajax

This article describes in detail how to use the jQuery framework and jQuery Address plug-in to implement the most basic full-site AJAX dynamic page content loading function.

Case objective
Take websites with common basic structures as an example to load page content through full-site link AJAX without refreshing new pages, without affecting seo/seo.html "target =" _ blank "> Search Engine indexing. Compatible with WordPress.

Function implementation
The following three constants must be provided to jQuery Address:

The Code is as follows:
Var baseurl = 'HTTP: // www.example.com/test/blog ',
Request_uri = '/test/blog /',
Request_uri_host = 'HTTP: // www.example.com ';

When the website root directory is in the root directory of the domain name, the three constants are defined:

The Code is as follows:
Var baseurl = 'HTTP: // www.111cn.net ',
Request_uri = '/',
Request_uri_host = 'HTTP: // www.111cn.net ';

The slash characters in the above definition of these constants are very important. errors may cause the website AJAX link to be unable to work.

The main function implementation procedure is as follows:

The Code is as follows:
// Global variable: initialization completion mark
Var is_loaded = false;

; (Function ($ ){
$ (Document). ready (function (){

// Initialize jQuery Address
$. Address. state (request_uri_host). init (function (){
// Bind all required links. The WordPress internal function links, Feed subscription links, and new window links are excluded.
$ ("A [href ^ = '" + baseurl + "']: not ([href * = '/wp-admin/']): not ([href * = '/wp-login.php']): not ([href $ = '/feed/']): not ([target = '_ blank']) ")
. Address ();
// Event when the URL changes
}). Change (function (e ){
// Prevent excessive AJAX loading during initialization
If (is_loaded)
// Load the clicked page content through AJAX
My_load_page ($. address. state () + e. path );
Is_loaded = true;
});

// Initialize the JS program on the page
My_init_after_ajax ();

});
}) (JQuery );

// Obtain the content of the new page through AJAX
Function my_load_page (url ){
// Display the Loading Layer
$ ('# Loading'). fadeIn ();
// Call jQuery AJAX
$. Ajax ({
Url: url, type: 'get', dataType: 'html ',
BeforeSend: function (){},
Success: function (data, textStatus, XMLHttpRequest ){
// Fade in and fade out in a timely manner # all-layer content, which can be adjusted to the desired animation effect
$ ('# All'). stop (true, false). animate ({'opacity': 0}, 500, function (){
$ ('Html, body'). scrollTop (0 );
('{All'}.html (''). append ($ ('<div>' + data + '</div> '{.find('{all'}.html ())
. Stop (true, fals (www.111cn.net) e). animate ({'opacity ': 1}, 500 );
//... In addition to modifying # all layer content, you can also modify other layers and <title>
// Initialize the JS program on the page
My_init_after_ajax ();
});
}
});
}

// Initialize the JS program on the page
Function my_init_after_ajax (){
// Hide the Loading Layer
$ ('# Overlay'). fadeOut ();
//... Initialize JS programs on various pages
}

WordPress + jQuery Address

In WordPress, apart from the main JS program that can be directly put into the Theme JS file, constant definitions need to be passed to the foreground by WordPress Theme PHP. The implementation method is as follows:

The Code is as follows:
// The callback process for loading js/CSS files in WordPress, which is generally located in Theme functions. php or other include files
Function my_enqueue_scripts_frontend (){

// Load the Theme main style table style.css File
Wp_enqueue_style ('all', get_stylesheet_uri ());

Wp_enqueue_script ('jquery ');
Wp_enqueue_script ('jquery. address', get_stylesheet_directory_uri (). '/js/jquery. address. min. js', array ('jquery '));
Wp_enqueue_script ('all', get_stylesheet_directory_uri (). '/js/all. js', array ('jquery'), false, true );

// Enable the nested reply function of the front-end comment
If (is_singular () wp_enqueue_script ('comment-reply ');

// Pass the JS variable to the loaded JS program named 'all' and encapsulate it in the 'Theme 'object.
Wp_localize_script ('all', 'Theme ', array (
'Baseurl' => home_url (),
'Request _ uri '=> $ _ SERVER ['request _ URI'],
'Request _ uri_host '=> (isset ($ _ SERVER ['https']) & $ _ SERVER ['https'] = 'on ')? 'Https: // ': 'http: //'). $ _ SERVER ['HTTP _ host'],
// Other actual parameters can still be passed here, such as calling the WordPress built-in AJAX function and calling the Theme element file URI.
// 'Ajaxurl' => admin_url ('admin-ajax. php '),
// 'Tplurl' => get_stylesheet_directory_uri (),
));

}
Add_action ('wp _ enqueue_scripts ', 'My _ enqueue_scripts_frontend ');

In this WordPress case, the Theme frontend/js/all. js program is as follows:

The Code is as follows:
If ('undefined '! = Typeof theme)
Var baseurl = theme. baseurl,
Request_uri = theme. request_uri,
Request_uri_host = theme. request_uri_host;

// .. JS Program
From: http://www.111cn.net/wy/jquery/49267.htm