php - 如何在 Zend 中开始使用 AJAX/JSON？

Question

我正在作为开发人员从事一些项目(PHP、MySQL)，其中已经实现了 AJAX 和 jQuery。但现在我想学习 AJAX 和 jQuery 的实现。谁能告诉我具体步骤并解释一下？

我在 Zend 中创建了一个项目。现在我的项目中只有一个 Controller (IndexController)和两个 Action (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>

这里的索引是链接中的 Controller 。 a 和 b 是 Action 。

现在我有四个这样的文件:

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 2

当用户点击第二个链接(加载信息B)时，b1.phtml应该加载到div one和b2中。 phtml 应该加载到 div 2

有人会帮助我吗？谢谢

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:这是我在 Stack Overflow 上的第一个贡献。请告诉我是否有帮助，或者有哪些可以改进的地方