Question

我正在使用CakePHP作为一个小型网络应用程序，在一个表单页面上有一个下拉列表来选择一个作业号。我想基于使用jQuery在下拉列表中选择的作业号更新两个文本字段（我也打开使用默认的ajax助手，但我没有取得很多成功）。

这是我的jQuery代码段：

<script>
    $(document).ready(function() {
        $('#job_id').change(function() {
            $.post('/surveys/jobdetails', {id: $(this).attr('id')});
        })
        .change();
    });
</script>

jobdetails是我的控制器中的一个方法，它根据传入的作业ID获取当前作业。但是，当下拉列表更改值时，它不会被调用。我尝试用一个警告函数代替.post并且这样做有效，所以正确调用onchange。

以下是我正在尝试更新的<div>：

echo "<div id='job_details'>";
echo $form->label('jobtitle', 'Job Title');
echo "<input type='text' name='jobtitle' id='jobtitle'>";
echo $form->label('department', 'Department');
echo "<input type='text' name='department' id='department'>";
echo "</div>";

我想将每个文本字段的值设置为从ajax调用返回的作业的相应值。有很多非常好的jQuery和CakePHP文档，但我没有找到任何完全涵盖我正在尝试做的事情。谁能看到我做错了什么？有没有更好的方法来使用ajax用CakePHP更新div？

Answer 1

现在，似乎AJAX请求命中了“/ surveys / jobdetails”URL，但对结果没有任何效果。您需要为AJAX请求添加一个回调，如下所示：

$(document).ready(function() {
    $('#job_id').change(function() {
        $.post('/surveys/jobdetails', {id: $(this).attr('id')},
        function(result) {
            $('#job_id').html(result);
        });
    })
    .change();
});

jQuery中还有一个名为load()的便捷函数，它进一步简化了它，获取了URL的内容并将其应用于所选元素：

$(document).ready(function() {
    $('#job_id').change(function() {
        $(this).load('/surveys/jobdetails', {id: $(this).attr('id')});
    })
    .change();
});

Answer 2

你的CakePHP控制器需要看起来像这样：

function jobdetails() {
    // get the data however you want
    // $_POST['id'] will have the job_id
    print json_encode(array(
        'jobtitle' => $jobtitle,
        'department'=>$dept
    ));
    exit;
}

然后，您需要向$.post添加一个实际更新字段的回调：

$(document).ready(function() {
    $('#job_id').change(function() {
        $.post('/surveys/jobdetails', {id: $(this).attr('id')}, function(json) {
            // now that we are in the callback,
            // the variable json is an object
            // with the values we passed above
            // so we can update the fields with the new values
            $('#jobtitle').val(json.jobtitle);
            $('#department').val(json.department);
        });
    })
    .change();
});

我还建议你使用像Firebug这样的工具，这样你就可以看到你的AJAX请求的进度，并确保服务器返回你认为它返回的内容。它使测试和调试任何与AJAX相关的方法更容易。

在我看来，这比输出整个DIV更新更优雅，但是如果你想走那条路，你只需要使用jQuery的.load来实现你想要的。

如何使用jQuery和CakePHP更新<div>？</div>

2 个答案: