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

Question

我将 CakePHP 用于一个小型 Web 应用程序，在一个表单页面上有一个下拉菜单可以选择工作编号。我想使用 jQuery 根据下拉列表中选择的作业编号更新两个文本字段（我也愿意使用默认的 ajax 帮助程序，但我没有取得很大的成功）。

这是我的 jQuery sn-p：

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

jobdetails 是我的控制器中的一个方法，它根据传入的作业 ID 获取当前作业。但是，当下拉列表更改值时，它不会被调用。我尝试用 alert 函数代替 .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”网址，但对结果没有任何作用。您需要为您的 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 来实现你想要的。