如何在从AJAX收到的智能模板中分配和显示数据

对于加载程序映像，您可以尝试以下代码，我在应用程序中使用了相同的代码。

  $(document).ajaxStart(function() {$("#content").mask("Please Wait...",0,250);});
  $(document).ajaxStop(function() {$("#content").unmask();});

您需要添加以下js代码。

(function($){
        /**
         * Displays loading mask over selected element(s). Accepts both single
         * and multiple selectors.
         * 
         * @param label
         *            Text message that will be displayed on top of the mask
         *            besides a spinner (optional). If not provided only mask
         *            will be displayed without a label or a spinner.
         * @param delay
         *            Delay in milliseconds before element is masked (optional).
         *            If unmask() is called before the delay times out, no mask
         *            is displayed. This can be used to prevent unnecessary mask
         *            display for quick processes.
         * @param pos
         *            Position of the loading message, if undefined, auto middle
         *            will be used.
         */
        $.fn.mask = function(label, delay, pos){
              var position = 'auto';
              if(pos !== undefined && pos > 0) {
                position=pos;
              }
            $(this).each(function() {
                if(delay !== undefined && delay > 0) {
                    var element = $(this);
                    element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label, position)}, delay));
                } else {
                    $.maskElement($(this), label, position);
                }
            });
        };
        /**
         * Removes mask from the element(s). Accepts both single and multiple
         * selectors.
         */
        $.fn.unmask = function(){
            $(this).each(function() {
                $.unmaskElement($(this));
            });
        };
        /**
         * Checks if a single element is masked. Returns false if mask is
         * delayed or not displayed.
         */
        $.fn.isMasked = function(){
            return this.hasClass("masked");
        };
        $.maskElement = function(element, label, position){
            // if this element has delayed mask scheduled then remove it and
            // display the new one
            if (element.data("_mask_timeout") !== undefined) {
                clearTimeout(element.data("_mask_timeout"));
                element.removeData("_mask_timeout");
            }
            if(element.isMasked()) {
                $.unmaskElement(element);
            }
            if(element.css("position") == "static") {
                element.addClass("masked-relative");
            }
            element.addClass("masked");
            var maskDiv = $('<div class="loadmask"></div>');
            // auto height fix for IE
            if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
                maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
                maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
            }
            // fix for z-index bug with selects in IE6
            if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
                element.find("select").addClass("masked-hidden");
            }
            element.append(maskDiv);
            if(label !== undefined) {
                var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
                maskMsgDiv.append('<div>' + label + '</div>');
                element.append(maskMsgDiv);
                // calculate center position
                            if (position=='auto') {
                              maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");
                            } else {
                              maskMsgDiv.css("top", position+'px');
                            }
                maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");
                maskMsgDiv.show();
            }
        };
        $.unmaskElement = function(element){
            // if this element has delayed mask scheduled then remove it
            if (element.data("_mask_timeout") !== undefined) {
                clearTimeout(element.data("_mask_timeout"));
                element.removeData("_mask_timeout");
            }
            element.find(".loadmask-msg,.loadmask").remove();
            element.removeClass("masked");
            element.removeClass("masked-relative");
            element.find("select").removeClass("masked-hidden");
        };
    })(jQuery);

对于图像加载，使用以下代码：

您需要在ajax调用中定义一个beforeSend处理程序。此处理程序将调用，直到您收到来自服务器的响应为止。。。因此不需要额外的js文件来添加

替换ajax代码如下：

$.ajax({    //create an ajax request to load_page.php
        type: "POST",
        data: {
                'request_type': 'ajax',
                'op': 'get_match_questions',
                'subject_id' : subject_id,
                'topic_id': topic_id
            },
        url: "match_question.php",             
        dataType: "html",   //expect html to be returned
        beforSend: function(){
            $("#image_loading_div").show();    
        }                
        success: function(response){
            $("image_loading_div").hide();                     
            //$("#test").html(response); 
            //alert(response);
        }
    });  

注意：创建id为"#image_loading_div"的div，并在其中加载图像，默认情况下设置display:none。

为了使用PHP进行轻松的ajaxian风格的页面更新，我建议使用基于PHP的框架Xajax。为什么？

• 自动将注册的函数或方法作为JavaScript方法公开给客户端
• 对现有代码的最小更改

使用$objResponse = new xajaxResponse();，可以使用许多方法来操作客户端，例如：

在客户端执行代码：

$objResponse->script("xajax_updateWall();");

清除客户端的元素：

$objResponse->clear("words","value");

在客户端显示警报：

$objResponse->alert($sErrMsg);

看看Xajax示例

在文件夹示例中，找到一些简单的用法示例，例如multiply:示例

您为客户端AJAX请求注册一个函数或方法，如下所示：

require_once ("../../xajax_core/xajax.inc.php");
$xajax = new xajax("multiply.server.php");
$xajax->configure('javascript URI','../../');
$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,"multiply");

在HTML页面中，您调用注册的函数，如下所示：

... onclick="xajax_multiply(document.getElementById('x').value, document.getElementById('y').value);return false;"...

以下是您处理请求的方式：

function multiply($x, $y)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("z", "value", $x*$y);
    return $objResponse;
}
require("multiply.common.php");
$xajax->processRequest();