Question

我正在构建一个使用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加载该方法，所以我想的是：< / p>

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');
        }
    });
}

Answer 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 Selector：）

通过锚ID调用AJAX

1 个答案: