1

我正在构建一个使用 AJAX 和 jQuery 的 Codeigniter 应用程序。在我的一种观点中，我有：

意见/用户/index.php

<?php echo anchor('users/edit', 'Edit Profile', array(
    'class' => 'user-link', 
    'id' => 'edit'
));?>

<?php echo anchor('users/private_messages', 'Private Messages', array(
    'class' => 'user-link', 
    'id' => 'private_messages'
));?>

<div id="ajax-loader"><img src="<?php echo base_url();?>img/loading.gif"/></div>
<div id="result"></div>

<script type="text/javascript">
$(function(){
    $('.user-link').click(function(event) {
        event.preventDefault();
        $.ajax({
            url: $(this).attr('href'),
            type: 'POST',
            async: true,
            beforeSend: function(){
                $('#result').hide();
                $('#ajax-loader').show();
            },
            error: function(xhr, status, thrown){
                alert(xhr + ',' + status+ ',' + thrown);
            },
            complete: function(){
                $('#ajax-loader').hide();
            },
            success: function(data) {
                $('#result').empty().append(data);
                $('#result').fadeIn('slow');
            }
        });
    });
});
</script>

这很好用，它获取href每个锚点的值并在点击时加载一个方法。现在我想做的是能够通过访问id锚点来使用 AJAX 加载方法，例如，如果我访问

http://appdomain.com/users/index#edit

我想获取该href锚点的值并用 AJAX 调用它。这背后的原因是我在Edit控制器中设置了一些重定向，指向users/index并且我需要在刷新后使用 AJAX 再次加载该方法，所以我在想类似的事情：

redirect(users/index#edit)

这实用吗？我需要一种在页面加载时启动对特定方法的 AJAX 调用的方法。任何建议将不胜感激。

编辑 ：

使用 Javascript 获取哈希值然后检查它似乎有效：

var hash = window.location.hash;
var id = hash.substring(0);
if(id == '#edit' || id == '#private-messages'){
    $.ajax({
        url: $(id).attr('href'),
        type: 'POST',
        async: true,
        beforeSend: function(){
            $('#result').hide();
            $('#ajax-loader').show();
        },
        error: function(xhr, status, thrown){
            alert(xhr + ',' + status+ ',' + thrown);
        },
        complete: function(){
            $('#ajax-loader').hide();
        },
        success: function(data) {
            $('#result').empty().append(data);
            $('#result').fadeIn('slow');
        }
    });
}
4

1 回答 1

1

我认为这不是正确的做法。您正在尝试将数据放入将在其他地方使用的 DOM 中。

现在你也许可以摆脱它，但如果你的流程变得稍微复杂一点，你就会遇到问题。

DOM 是一个视图，而不是一个模型。JavaScript 是您的模型，因此如果您需要保留一些数据进行处理，请确保所有这些数据都在 JavaScript 中可用。

您将知道您将拥有哪些按钮以及附加了哪些流程。您可以使用 jQuery 将按钮链接到流程。您应该只替换$(this).attr('href')链接，可能是服务器生成的链接，因为它知道 URL。

您可以放置​​内联 PHP 块，例如：

{
  url: <?php echo json_encode($url);
}

或者您可以一次从 PHP 中导入您需要的所有内容：

var my_data = <?php echo json_encode(array("url" => $url));?>;

{
    url: my_data.url
}

这种方法可确保您的 HTML 保持干净，并且您将始终有空间来扩展您的模型。

下一步是将您的模板迁移到 JavaScript，这样您就不再需要 CSS 选择器了 :)

于 2013-06-26T17:17:44.887 回答