Как начать с AJAX / JSON в Zend?

Question

Я работаю над некоторыми проектами в качестве разработчика (PHP, MySQL), в которых AJAX и jQuery уже реализованы. Но сейчас я хочу изучить реализацию AJAX и jQuery. Может кто-нибудь сказать мне точные шаги с объяснением?

Я создал проект в Zend. Сейчас в моем проекте только один контроллер (IndexController) и два действия (a и b). Теперь я хочу использовать ajax в моем проекте. Но я не знаю с чего начать. Я прочитал учебник, но не могу полностью понять.

У меня есть index.phtml вот так:

<a href='index/a'>Load info A</a>
<br/>
<a href='index/b'>Load info B</a>

<br />
<div id=one>load first here<div>
<div id=two>load second here</div>

Здесь индекс - это контроллер в ссылках. А и В - действия.

Теперь у меня есть четыре файла:

a1.phtml

I am a1

a2.phtml

I am a2

b1.phtml

I am b1

b2.phtml

I am b2

Я думаю, вы поняли мою точку зрения.

Когда пользователь нажимает первую ссылку (Загрузить информацию A) , тогда a1.phtml должен быть загружен в div one и a2.phtml должен быть загружен в div два

Когда пользователь нажимает вторую ссылку (Загрузить информацию B) , тогда b1.phtml должен быть загружен в div one и b2.phtml должен быть загружен в div два

Кто-нибудь мне поможет? Спасибо

Answer 1

Я ничего не знаю о Zend (-controllers), но если вы просто хотите загрузить a1 / a2 / b1 / b2.phtml, я думаю, что это поможет:

Поместите следующий код в раздел страницы. Для этого потребуется библиотека jQuery.

<script type="text/javascript" src="path/to/jquery-1.4.2.min.js"></script>

Версия не обязательно должна быть 1.4.2, но я протестировал код с этим.

Я добавил объяснение в комментарии.

<script type="text/javascript">
jQuery(document).ready(function(){ // This function will be executed when the page is loaded
    jQuery('#linkA').click(loadInfoA); // Here a 'click' event is registered on the links
    jQuery('#linkB').click(loadInfoB); // When the user clicks on of the link the functions (loadInfoA, loadInfoB) will be executed
});

function loadInfoA(event){ // This function will load the info from a1.phtml and a2.phtml
    event.preventDefault(); // This is to prevent the link (index/a) from being followed
                            // Otherwise the user would be leaving the page and a1/a2.phtml wouldn't
                            // be loaded into the divs
    jQuery.ajax({ // This is the main AJAX magic read more about it here: http://api.jquery.com/jQuery.ajax/
        url: 'a1.phtml', // this is the page that will be loaded: a1.phtml
        success: function(data){ // this function will be executed when the data is loaded from the server
            jQuery('#one').html(data); // This will take div-one and put the from a1.phtml data in it
        }
    });
    jQuery.ajax({
        url: 'a2.phtml', // a2.phtml will be loaded
        success: function(data){
            jQuery('#two').html(data); // This will take div-two and put the data from a2.phtml in it
        }
    });
}
function loadInfoB(event){ // This function does the same as loadInfoA except that it will load b1/b2.phtml
    event.preventDefault();
    jQuery.ajax({
        url: 'b1.phtml',
        success: function(data){
            jQuery('#one').html(data);
        }
    });
    jQuery.ajax({
        url: 'b2.phtml',
        success: function(data){
            jQuery('#two').html(data);
        }
    });
}
</script>

Я немного отредактировал ваш HTML, чтобы jQuery мог зарегистрировать событие щелчка по ссылкам

<a href='index/a' id="linkA">Load info A</a>
<br/>
<a href='index/b' id="linkB">Load info B</a>
<br />

<div id="one">load first here</div>
<div id="two">load second here</div>

PS: Это мой первый вклад в переполнение стека. Пожалуйста, дайте мне знать, если это было полезно, или что можно улучшить

Answer 2

Вы можете сделать это с помощью нескольких строк в jQuery

$(function() { 

    wrapper_id = "ajax-wrapper";
    $('.tabdiv').wrap("<div id='"+ wrapper_id + "' />");
    $.historyInit(pageload);

    $('.tabNav li a').click(function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $(".tabNav li").removeClass("ui-tabs-selected");
        $(this).parent().addClass("ui-tabs-selected");
        $.historyLoad(href);
    });

});

function pageload(href) {
    if(href) {            
        $("#" + wrapper_id).load(href + " .tabdiv",'',function (responseText, textStatus, XMLHttpRequest) {
            $("#" + wrapper_id).fadeIn("");
        });
    }
}

Answer 3

Или в Zend у меня есть плагин Layout, который проверяет AJAX с использованием XMLHttpRequest

$ajax = isset ( $_SERVER ['HTTP_X_REQUESTED_WITH'] ) ? $_SERVER ['HTTP_X_REQUESTED_WITH'] : '';

if ($ajax == "XMLHttpRequest" || $request->getParam('ajax')) {
 return true;
}

echo Zend_Json::encode(array(
 'content'=>$data[$this->_defaultContentArea],
 'container'=>$request->container, 
));

Надеюсь, это поможет