Доброе утро, поклонники jQuery, сегодня я делюсь с вами небольшой вспомогательной функцией ajax, которую я кодировал, которая может принимать некоторые базовые настройки ajax и либо сохранять данные локально в объекте JavaScript, либо динамически запускать функцию обратного вызова JavaScript при успешном выполнении ajax. Использование служебной функции ajax избавит вас от необходимости писать функции ajax в нескольких файлах . Он также хранит ваш вызов определения ajax в одном месте, если вам нужны особые требования для ajax, такие как добавление загрузочного образа или определенных обработчиков ошибок.
Похожие сообщения:
Вспомогательная функция AJAX
Это вспомогательная функция ajax, которая может быть включена в ваш служебный объект JavaScript.
/**
* JQUERY4U.COM
*
* Provides utility functions to other JavaScript Objects.
*
* @author Sam Deering
* @copyright Copyright (c) 2012 JQUERY4U
* @license http://jquery4u.com/license/
* @since Version 1.0
* @filesource js/jquery4u.util.js
*
*/
(function($,W,D)
{
W.JQUERY4U = W.JQUERY4U || {};
W.JQUERY4U.UTIL =
{
/**
* AJAX helper function which can be used dynamically to store data or run a function upon success.
* @param callback - 'store' to store data locally or 'run' to run a callback function.
* @param callbackAction - where to store the data.
* @param subnamespace - what namespace to store the data/run the function.
*/
ajax: function(type, url, query, async, returnType, data, callback, callbackAction, subnamespace)
{
$.ajax(
{
type: type,
url: url + query,
async: async,
dataType: returnType,
data: data,
success: function(data)
{
switch(callback)
{
case 'store':
JQUERY4U[subnamespace]["data"][callbackAction] = data; //store data
break;
case 'run':
JQUERY4U[subnamespace][callbackAction](data); //run function with data
break;
default:
return true;
}
},
error: function(xhr, textStatus, errorThrown)
{
alert('ajax loading error...');
return false;
}
});
}
}
})(jQuery,window,document);
Как использовать служебную функцию AJAX
Вот как вы можете использовать утилиту ajax для:
1) Получите данные с помощью ajax и сохраните их на своем объекте JS
2) Получить данные с помощью ajax и запустить функцию обратного вызова, которая передает данные
/**
* JQUERY4U.COM
*
* Example JavsScript object to make use of the AJAX utility function.
*
* @author Sam Deering
* @copyright Copyright (c) 2012 JQUERY4U
* @license http://jquery4u.com/license/
* @since Version 1.0
* @filesource js/jquery4u.module.js
*
*/
(function($,W,D)
{
W.JQUERY4U = W.JQUERY4U || {};
W.JQUERY4U.MODULE =
{
data:
{
ajaxData: '' //used to store ajax data
},
init: function()
{
this.getData(); //store data test
this.runFunc(); //run function test
},
//example function to call ajax and then save data after ajax success
getData: function()
{
JQUERY4U.UTIL.ajax('GET', 'jquery4u.com/data.php', '?param=value¶m2=value2', false, 'HTML', '', 'store', 'ajaxData', 'MODULE');
//data from ajax is stored in JQUERY4U.MODULE.data.ajaxData after ajax success
},
//example function to call ajax and then run a function after ajax success
runFunc: function()
{
var data = ['some data passed', 'to server side script'];
JQUERY4U.UTIL.ajax('POST', 'jquery4u.com/data.php', '', true, 'HTML', data, 'run', 'ajaxCallbackFunction', 'MODULE');
//JQUERY4U.MODULE.ajaxCallbackFunction is called after ajax success
},
//function that is called after ajax success
ajaxCallbackFunction: function(data)
{
//do something with returned data
}
}
$(D).ready(function() {
JQUERY4U.MODULE.init();
});
})(jQuery,window,document);
Эта функция ajax полностью работает, но она работает, я настраиваю ее здесь и там, поэтому я постараюсь обновлять код.