Jquery plug-in unobtrusive implements segment loading _ jquery

This article will share with you the effect of using the jquery plug-in unobtrusive for segment loading. If you need it, you can refer to it. If you don't talk nonsense, first share the source code with everyone.

// Ajax support library /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. all rights reserved. * // * jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: false * // * global window: false, jQuery: false * // * data-ajax = true // enable Binding data-ajax-mode // The updated form BEFORE is empty AFTER it is inserted into the object. Is to overwrite the data-ajax-update // updated object data-ajax-confirm // set a text in the confirm to cancel the pop-up box, if not, do not set data-ajax-loading // display the loading object data-ajax-loading-duration // The default duration is 0data-ajax-method // The data-ajax-url submission method // the function that is triggered before urldata-ajax-begin // ajax is submitted or a program data-ajax-complete // (function) is completed ), at this time, no returned data has been loaded. When the request succeeds or fails, data-ajax-success // success (function) is called. The loaded data-ajax-failure // fails, error */(function ($) {var data_click = "unobtrusiveAjaxClick", data_validation =" UnobtrusiveValidation "; // the second core is used to determine whether a function is used. If not, an anonymous function is constructed. function getFunction (code, argNames) {var fn = window, parts = (code | ""). split (". "); while (fn & parts. length) {fn = fn [parts. shift ()];} // find the function name. Sometimes it is a namespace such as xxx. xxx if (typeof (fn) = "function") {return fn;} argNames. push (code); // if it is not a function object, construct one and return it! Return Function. constructor. apply (null, argNames);} function isMethodProxySafe (method) {return method = "GET" | method = "POST ";} // you can add various submission methods. This should be a complementary function asyncOnBeforeSend (xhr, method) {if (! IsMethodProxySafe (method) {xhr. setRequestHeader ("X-HTTP-Method-Override", method);} // Note: X-HTTP-Method-Override is a non-standard HTTP header. // This is designed for clients that cannot send certain HTTP request types (such as PUT or DELETE)} // function asyncOnSuccess (element, data, contentType) {var mode after completion; if (contentType. indexOf ("application/x-javascript ")! =-1) {// jQuery already executes JavaScript for us return;} mode = (element. getAttribute ("data-ajax-mode") | ""). toUpperCase (); $ (element. getAttribute ("data-ajax-update ")). each (function (I, update) {var top; switch (mode) {case "BEFORE": top = update. firstChild; $ ("
"Pai.html (data). contents (). each (function () {update. insertBefore (this, top) ;}); break; case" AFTER ": $ ("
"Pai.html (data ). contents (). each (function () {update. appendChild (this) ;}); break; default: vertex (update0000.html (data); break ;}}) ;}// main function // The bound object and Parameter function asyncRequest (element, options) {var confirm, loading, method, duration; confirm = element. getAttribute ("data-ajax-confirm"); if (confirm &&! Window. confirm (confirm) {return;} loading = $ (element. getAttribute ("data-ajax-loading"); // duration = element. getAttribute ("data-ajax-loading-duration") | 0; // The default value is 0 $. extend (options, {type: element. getAttribute ("data-ajax-method") | undefined, url: element. getAttribute ("data-ajax-url") | triggered before undefined, beforeSend: function (xhr) {// ajax. xhr here will be passed out var result using apply below; asyncOnBeforeSend (xhr, Method); // determine whether to add a special submission method result = getFunction (element. getAttribute ("data-ajax-begin"), ["xhr"]). apply (this, arguments); // argument: replaces one of the attribute objects in the function object and stores the parameters. Here, the original parameters are passed out! If (result! = False) {loading. show (duration) ;}return result ;}, complete: function () {loading. hide (duration); getFunction (element. getAttribute ("data-ajax-complete"), ["xhr", "status"]). apply (this, arguments) ;}, success: function (data, status, xhr) {asyncOnSuccess (element, data, xhr. getResponseHeader ("Content-Type") | "text/html"); getFunction (element. getAttribute ("data-ajax-success"), ["data", "statu S "," xhr "]). apply (this, arguments) ;}, error: getFunction (element. getAttribute ("data-ajax-failure"), ["xhr", "status", "error"])}); options. data. push ({name: "X-Requested-With", value: "XMLHttpRequest"}); method = options. type. toUpperCase (); // uppercase if (! IsMethodProxySafe (method) {options. type = "POST"; options. data. push ({name: "X-HTTP-Method-Override", value: method});} // call jquery's ajax $. ajax (options);} function validate (form) {// you can cancel var validationInfo = $ (form ). data (data_validation); return! ValidationInfo |! ValidationInfo. validate | validationInfo. validate () ;}$ (document ). on ("click", "a [data-ajax = true]", function (evt) {evt. preventDefault (); asyncRequest (this, {url: this. href, type: "GET", data: []}) ;}); $ (document ). on ("click", "form [data-ajax = true] input [type = image]", function (evt) {// This is not commonly used var name = evt.tar get. name, $ target = centers (evt.tar get), form = $ target. parents ("form") [0], offset = $ target. Offset (); $ (form ). data (data_click, [{name: name + ". x ", value: Math. round (evt. pageX-offset. left)}, {name: name + ". y ", value: Math. round (evt. pageY-offset. top)}]); setTimeout (function () {$ (form ). removeData (data_click) ;}, 0) ;}); $ (document ). on ("click", "form [data-ajax = true]: submit", function (evt) {var name = evt.tar get. name, form = certificate (evt.tar get ). parents ("form") [0]; $ (form ). data (dat A_click, name? [{Name: name, value: evt.tar get. value}]: []); setTimeout (function () {$ (form ). removeData (data_click) ;}, 0) ;}); $ (document ). on ("submit", "form [data-ajax = true]", function (evt) {var clickInfo = $ (this ). data (data_click) | []; evt. preventDefault (); if (! Validate (this) {return;} asyncRequest (this, {url: this. action, type: this. method | "GET", data: clickInfo. concat ($ (this ). serializeArray () // well written. serialize and splice the form. ajax can be used in the future, which is convenient}) ;}; // extended function bindDataAjax (obj) {$ (obj ). on ("click", "a [data-ajax = true]", function (evt) {evt. preventDefault (); asyncRequest (this, {url: this. href, type: "GET", data: []}) ;}); $ (obj ). on ("click", "form [data-ajax = tru E] input [type = image] ", function (evt) {// This is not commonly used var name = evt.tar get. name, $ target = centers (evt.tar get), form = $ target. parents ("form") [0], offset = $ target. offset (); $ (form ). data (data_click, [{name: name + ". x ", value: Math. round (evt. pageX-offset. left)}, {name: name + ". y ", value: Math. round (evt. pageY-offset. top)}]); setTimeout (function () {$ (form ). removeData (data_click) ;}, 0) ;}); $ (obj ). On ("click", "form [data-ajax = true]: submit", function (evt) {var name = evt.tar get. name, form = certificate (evt.tar get ). parents ("form") [0]; $ (form ). data (data_click, name? [{Name: name, value: evt.tar get. value}]: []); setTimeout (function () {$ (form ). removeData (data_click) ;}, 0) ;}); $ (obj ). on ("submit", "form [data-ajax = true]", function (evt) {var clickInfo = $ (this ). data (data_click) | []; evt. preventDefault (); if (! Validate (this) {return;} asyncRequest (this, {url: this. action, type: this. method | "GET", data: clickInfo. concat ($ (this ). serializeArray () // well-written. serialize and splice the form. This can be used in ajax in the future.}) ;}$. fn. unobtrusive = function (option, param) {if (typeof options = "string") {return $. fn. unobtrusive. methods [options] (this, param) ;}// method $. fn. unobtrusive. methods = {resetbind: function (jq) {// the corresponding object re-initializes return jq. each (function () {// bindDataAjax ($ (this), obj); // bindDataAjax (obj); bindDataAjax (jq );});}}} (jQuery ));

At the beginning of the appearance of the word "// extension", I wrote the extension, without interfering with the original code (it is my principle to try not to modify others' code, and it is also my respect for others ). Function is mainly used to provide code binding for a specified region.

The Code is as follows:

$ (Obj). unobtrusive ('resetbind ')

To bind the DOM object. For example, loading a page in a segment

The Code is as follows:

Add

Load the Ajax code into the. down-content container, and then render and bind them (in fact, easyui In the UI does the same)

In the segment loading method, I mentioned that jquery's load can also be implemented. In my previous blog, the open-source MvcAdmin uses load, but it is still jquery's html method. Load internal is the Ajax encapsulation, and then loaded to the page with html, load source code seems to write such a http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.fn.load

Special reminder

Data-ajax-begin // a function or a program triggered before ajax

After data-ajax-complete // is complete, the returned data is not loaded yet. When the request succeeds or fails

Data-ajax-success // data loaded successfully

The function called by these three parameters must be a string and does not need to be (). For example, data-ajax-begin = "function name" is not data-ajax-begin = "function name ()". No parentheses are required!

The above is all the content of this article. I hope you will like it.