JQuery + ajax implements partial refresh, and jqueryajax implements partial

JQuery + ajax implements partial refresh, and jqueryajax implements partial

Ajax is often used in projects, such as local refreshing and front-end interaction. Here we will share two methods of local refreshing, mainly in ajax. load ().

First:

When several pages have the same header, navigation, and bottom, you can click the navigation link to switch between several pages. In this case, you want to click the link and only switch the content, others are not reloaded. On the code.

Jq-load.html:

1 <! DOCTYPE html> 2 
Note: The jq-load2.html#jq-load3.htmlcode is basically the same as that of jq-load.html. The content displayed only in the # container div is different.
Jq-load.js:
1 $ ('nav '). on ('click', function (e) {2 e. preventDefault (); // stop link jump 3 var url = this. href; // Save the clicked address 4 $5 ('nav. current '). removeClass ('current '); 6 $ (this ). addClass ('current'); 7 8 $ ('# iner '). remove (); 9 $ ('# content '). load (url + '# iner '). fadeIn ('low'); // loads new content. There must be a space between the url address and the selector under the address, indicating # container10} under the url });
Note: This method uses some new html5 tags and will not be repeated when you create them in js.
Second:
If there is a list on the left side of the page, click the list to switch the content on the right side. If there are too many content on the right side, it is not suitable for tabs. In this case, it is better to use. load () to partially refresh the page. On the code.
User.html:
1 <! DOCTYPE html> 2 
User. js:
$ (Function () {$ (". userMenu "). on ("click", "li", function () {var sId = $ (this ). data ("id"); // obtain the value of data-id window. location. hash = sId; // set the anchor loadInner (sId) ;}); function loadInner (sId) {var sId = window. location. hash; var pathn, I; switch (sId) {case "# center": pathn = "user_center.html"; I = 0; break;
Case "# account": pathn = "user_account.html"; I = 1; break; case "# trade": pathn = "user_trade.html"; I = 2; break; case "# info": pathn = "user_info.html"; I = 3; break;
Default: pathn = "user_center.html"; I = 0; break ;}$ ("# content "). load (pathn); // load the corresponding content $ (". userMenu li "). eq (I ). addClass ("current "). siblings (). removeClass ("current"); // current list highlighted} var sId = window. location. hash; loadInner (sId );});
User_center.html:
<Div> User center ...... </Div>
Note: The pages of other user_xxx.html are also the corresponding content of the list.
Summary:
The above two methods work the same way. load () is used to reload a part of the page. You must note that ajax must be run in the server environment. Through comparison, we can find that the first one is relatively simple, and the second one is slightly more complex. However, the second one is recommended by individuals. The first one is mainly for example. how is load () used? In fact, it is slightly inferior in terms of user experience. For example, when you click it, the address in the address bar will not change, so that the forward and backward will become invalid. This can be implemented later. In the second case, the app is flexible and uses the custom properties of data-* to store data. When you click it, you can modify the anchor because the address has changed, therefore, the content of the current page will be refresh instead of being switched to the first one.
 
If you have any questions, please give me more advice. Thank you.