用PHP控制jQuery,目的在ajax请求中不同的请求不用独立写js,在php中实现client功能,可以调用全部jquery方法,并且可以采用jquery的链式语法。
js部分
//处理所有ajax返回 function processResponse($obj, data) { for (var i=0; i<data.length; i++) { if ('this' === data[i].selector) { } else if ('jQuery' === data[i].selector) { $obj = jQuery; } else { $obj = jQuery(data[i].selector); } delete data[i].selector; for (var command in data[i]) { for (var j=0; j<data[i][command].length; j++) { $obj = $obj[command].apply($obj, data[i][command][j]); } } } }
这个js function用来处理ajax请求PHP处理后返回的json对象,把其中的jQuery指令翻译成js执行
$(body).on('submit', 'form[target="background"]', function() { var formData = new FormData(this);
$form = $(this); $.ajax({ type: 'POST', url: this.action, data: formData, /** *必须false才会自动加上正确的Content-Type */ contentType: false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false, dataType: 'json', success: function(data){ processResponse($form, data); } }); }
拦截所有target=background的表单的提交动作,转为 ajax请求,将返回交给上面的函数处理,同事传递该表单的jQuery封装对象到处理函数中
class Tuki_jQuery { private static $_data = array(); private $_key = 0; function __construct($selector = 'jQuery') { $this->_key = count(self::$_data); self::$_data[$this->_key] = array('selector' => $selector); } function __toString() { return json_encode(self::$_data); } function __call($name, $arguments) { self::$_data[$this->_key][$name][] = $arguments; return $this; } static function getData() { return count(self::$_data) ? json_encode(self::$_data) : ''; } } function jQuery($selector = 'jQuery') { return new Tuki_jQuery($selector); }
php库,将php中的jQuery指令封装成json对象
调用方式
1. 调用jQuery对象的方法 jQuery()->alert('hello, world'); /*alert是自己给客户端jQuery js对象添加的方法 jQuery.alert = function(message) { alert(message); return jQuery; };*/ 2. 选择元素后执行代码 jQuery('#popup_box')->html(ob_get_clean()); 3. 直接基于发起ajax的对象处理 jQuery('this')->html('submited')->hide();
3种方式在一个页面请求中可以同时多次使用,只需要在最后使用echo Tuki_jQuery::getData() 输出json文本