zoukankan      html  css  js  c++  java
  • PHP中直接使用jQuery

    用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文本

  • 相关阅读:
    JS 百度地图路书---动态路线
    jQuery---创建和添加节点
    CSS基础
    第一篇:前端知识之HTML内容
    JS高级---为内置对象添加原型方法
    JS DOM属性+JS事件
    Vue-router
    vue使用kkfileview文件预览功能
    JS高级---案例:验证密码的强度
    promise是怎么来的?
  • 原文地址:https://www.cnblogs.com/ranh/p/3381582.html
Copyright © 2011-2022 走看看