Zend Form：onchange select加载另一个视图内容

Question

在我的应用程序中，我在控制器/索引中有一个由3个选择框组成的表单。当所有三个框都选择了值时，我需要根据这些选择值在同一视图中显示其他html和额外的表单选项。显而易见的解决方案似乎是对另一个处理数据库操作的操作进行ajax调用，并创建一个视图并将该视图加载到controller / index.phtml中

我可以使用：

在index.phtml中加载另一个动作的视图

$('#select').change(function() {
    event.preventDefault();
    var id = $(this).attr('id');
    $('#results').show();
    $('#results').load('/controller/index/' + $(this).attr('value'));
    return false;
});

但是我需要传递所有三个选择框的变量，为此我也选择使用：

$('#select1').change(function() {
var select1     = $('#select1').val();
var select2     = $('#select2').val();
var select3     = $('#select3').val();
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/controller/index/',
    data: { select1: select1, select2: select2, select3: select3},
    success: function(result){
                var return1 = result.return1;
                var return2 = result.return2;
         }
    });

});

最后一个方法可以工作，我确实看到头中传递的变量，响应包含视图，但我无法修复它只是ajax视图的内容放在索引视图中。 （当然，不使用AjaxContent切换，ajax视图将加载，但也包括完整的布局。）我在ajax动作或ajax视图中回显的任何内容都不会显示在索引视图中。任何指针都不仅仅是受欢迎的

修改

ajax动作现在看起来像

$this->view->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);

$select1 = $this->_request->getParam('select1');
$select2 = $this->_request->getParam('select2');
$select3 = $this->_request->getParam('select3');

// DO THE OTHER STUFF AND LOGIC HERE

$results = array(
 'return1' => 'value1',
 'return2' => 'value2'
);

$this->_response->setBody(json_encode($results));

和控制器init

public function init() {
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('ajax', 'json')->initContext();
}

所以一切正常，我可以在我的浏览器中使用开发人员工具（网络）看到响应中返回的值，但是我只是不知道如何使用它来“更新”视图

Answer 1

你可以做两件事：

• 您可以通过ajax启用要呼叫的操作的布局。看到你已禁用布局，所以即使ajax动作的视图phtml文件包含某些内容，它也不会显示。您可以启用布局，使用text / html dataType而不是json并在某处显示返回的HTML。
• 或者，在ajax调用的success事件中，编写javascript代码来更新DOM。

Answer 2

感谢@Salman提出的建议，因为他们引导我朝着正确的方向前进，并设法解决了问题。 我通过将它们作为get参数传递，设法通过ajax .load（）调用传递多个参数。 然后可以在ajax.ajax.phtml视图中格式化ajaxAction的结果并连续 显示在#results div中，该div驻留在index.phtml中，其中选择框为。

控制器/ index.phtml

<div id="results" style="display:block;">Select all three values</div>

IndexController init和ajaxAction

public function init() {
    $ajaxContext = $this->_helper->getHelper('AjaxContext');
    $ajaxContext->addActionContext('ajax', 'html')->initContext('html');
}

public function ajaxAction() {

    $select1    = $this->_request->getQuery('select1');
    $select2    = $this->_request->getQuery('select2');
    $select3    = $this->_request->getQuery('select3');

    $form   = new Application_Form();

    // Database operations and logic

    $this->view->form       = $form;
    $this->view->array      = $somearray;
    } 
}

index.phtml中的jquery脚本

$(document).ready(function(){

    $('.selector').change(function() {
        var select1 = $('#select1').val();
        var select2 = $('#select2').val();
        var select3 = $('#select3').val();
        if ( select1 && select2 && select3) {
            $('#results').show();               
            $('#results').load('/controller/ajax?select1=' + select1 + '&select2=' + select2 + '&select3=' + select3);
        }
    });

});

控制器/ ajax.ajax.phtml

<?php if ( $this->array ) : ?>
    <?php echo( $this->form ); ?>
<?php else: ?>
    Nothing found for selected values
<?php endif ?>