Nasıl Zend AJAX / JSON ile başlanır?

3 Cevap php

AJAX ve jQuery zaten uygulanmakta olduğu bir geliştirici (PHP, MySQL) gibi bazı projeler üzerinde çalışıyorum. Ama şimdi ben AJAX ve jQuery şeyler uygulanmasını öğrenmek istiyorum. Herkes bana açıklama ile kesin adımlar söyleyebilir misiniz?

Ben Zend bir proje oluşturduk. Şimdi benim projede sadece tek bir kontrolör (IndexController) ve iki eylem (a ve b) bulunmaktadır. Şimdi ben projemde ajax kullanmak istiyorum. Ama nasıl başlayacağınızı bilmiyorsanız. Bazı öğretici ama tamamen anlamak mümkün okuyun.

Ben index.phtml böyle var:

<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>

Here index is controller in links. a and b are actions.

şimdi böyle dört dosyaları var:

a1.phtml

I am a1

a2.phtml

I am a2

b1.phtml

I am b1

b2.phtml

I am b2

Ben benim açımdan var düşünüyorum.

Kullanıcı ilk bağlantıyı tıkladığında (Load info A) ardından a1.phtml div one içine yüklenmiş olması gerekir ve a2.phtml div two içine yüklenmiş olması gerekir

Kullanıcı ikinci linki tıkladığında (Load info B) ardından b1.phtml div one içine yüklenmiş olması gerekir ve b2.phtml div two içine yüklenmiş olması gerekir

Birisi bana yardım edecek? Teşekkürler

3 Cevap

Ben Zend (denetleyiciler) hakkında hiçbir şey bilmiyorum ama sadece a1/a2/b1/b2.phtml yüklemek istiyorsanız bu yardımcı olacağını düşünüyorum:

Put the following code in the section of the page. It will need the jQuery library to be included.

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

1.4.2 versiyonu olmak zorunda değildir ama ben bu konuda kodu test ettik.

Ben yorum olarak açıklama koyduk.

<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>

JQuery bağlantıları bir click olayı kayıt böylece ben biraz senin HTML kaydetmiştiniz

<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: Bu yığın taşması benim ilk katkıdır. Yararlı olup olmadığını bana bildirin, ya da ne geliştirilebilir Lütfen

Sen jQuery birkaç satır ile bunu yapabilirsiniz

$(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("");
        });
    }
}

Ya Zend AJAX XMLHttpRequest kullanarak kontrol bir Düzeni Eklentisi var

$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, 
));

Umarım bu yardımcı olur

etiketler