1

jQueryでAJAXを利用するCodeigniterアプリを構築しています。私の見解の 1 つでは、次のように考えています。

ビュー/ユーザー/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 に答える