4

私はPHP/AJAXアプリケーションに取り組んでいますが、すぐに管理できなくなります。

このアプリケーションは、デスクトップアプリケーションのように機能するように設計されているため、ほとんどすべてのユーザーアクションでAJAX呼び出しが発生します。

これらのアクションのすべてについて、データをPHPスクリプトに送信し、サーバー側のアクションを処理する対応するPHP関数を実行するjQueryがあります。

つまり、jQueryファイルには次のようなものがあります。

$('.delete-project').on('click', function(){
     // Ajax request to http://myapp.co.uk/ajax/delete_project
});

$('.delete-user').on('click', function(){
     // Ajax request to http://myapp.co.uk/ajax/delete_user
});

$('.delete-keyword').on('click', function(){
     // Ajax request to http://myapp.co.uk/ajax/delete_keyword
});

物事を行うためのより良い方法があると確信していますが、多くの同様のコードを回避するために、一般的にどのように行われていますか？上記のアクションは、アイテムタイプとデータベースIDを投稿する1つの「削除」ajaxリクエストにロールインされる可能性がありますが、私の関数の多くは異なるデータを投稿し、異なるパラメーターを必要とするため、1つのjQueryハンドラーにうまく適合しません。

AJAXアプリケーションをどのように組み合わせるかについていくつかのリソースを見つけようとしましたが、見つけることができるのは、スケーラブルなAJAXアプリケーションの作成方法ではなく、AJAXリクエストの作成などの初心者向けチュートリアルだけです。

明確にするために、私はAJAXがどのように機能するかを知っていますが、必要なjQueryとPHPを可能な限り削減するという観点から、AJAXを実装するための最良の方法を見つけようとしています。

この種のことを扱う良いリソースはありますか？

4

6 に答える 6

2

HTMLの属性を使用して、これらすべてを1つの削除関数にまとめることができます。次に例を示します。

$('.delete').on('click', function(){
     var delete = $(this).attr('data-delete');
     // Ajax request to http://myapp.co.uk/ajax/delete_{delete}
});

その場合、HTMLは次のようになります。

<a href="#" class="delete" data-delete="project">Delete</a>

データ属性に関する詳細情報

于 2012-11-26T16:44:52.330 に答える
2

これが役立つかどうかはわかりませんが、コードが大きくなるにつれてコードを減らすための関数をいくつか作成することができます。手始めに、jQuery .ajax関数を独自のカスタムラッパー関数に配置することで、ajax呼び出しの重複を防ぐことができます。例えば：

function ajaxGet(myUrl, queryString, successCallback, errorCallback) {
    if(queryString) myUrl+= "?" + queryString;
    $.ajax({
         url: myUrl,
         type: "GET",
         data: null,
         success: function (res) {
             if(!successCallback) return;
             else successCallback(res);
         },
         failure: function (res) {
             if(!errorCallback) return;
             else errorCallback(res);
         }
},

ラッパー関数を作成することで、各クリック関数で$ .ajax呼び出しコードを何度も複製することなく、必要なデータを渡すことができます。postを使用してajax呼び出し用の同様の関数を作成することもできます。次に、クリック関数を動的に構築して、コードをさらに削減できます。

function buildClicks() {
    setupClick([url], [data], [success], [error], [$(elem)]);
    setupClick([url], [data], [success], [error], [$(elem)]);
    setupClick([url], [data], [success], [error], [$(elem)]);
}

//Setup clicks for each button or link

function setupClick(url, data, success, error, elem) {
    elem.click(function () {
        ajaxGet(url, data, success, error);
    });
}

この例では、「GET」を使用してクエリ文字列を追加していると想定しています。カスタムの「POST」関数を使用して、これをパスに簡単に適合させることができます。たとえば、JSON形式のオブジェクトです。その場合、[data]はクエリ文字列ではなくオブジェクトになります。

申し訳ありませんが、このコードは最も明確ではありません。もう少し説明させてください。buildClicks関数を使用すると、必要なデータを渡すことで、さまざまな要素に複数のクリックイベントを設定できます。データを渡すかどうかはわかりませんが、上記の関数でデータを渡すことができます。クリックを動的に作成することで、.clickコードが何度も重複するのを防ぐことができます。ドキュメントの準備ができた状態でbuildClicks関数を呼び出すだけです。

$(document).ready(function () { buildClicks(); });

注：成功とエラーのコールバックは、呼び出しが正常に完了するかエラーが発生したときに実行される関数です。これらを使用したくない場合は、省略したり、nullを渡すことができます。関数を渡す場合は、関数名の末尾の「（）」を省略してください。それ以外の場合、関数はajax呼び出しが成功または失敗する前に実行されます。例えば：

ajaxGet("http://testurl.com", null, ajaxSuccess, ajaxFailure);

ajaxSuccess() {

}

ajaxFailure() {

}
于 2012-11-26T17:01:38.393 に答える
0

そのボタンとのようなクラスにID属性を設定できますsubmit-button。

$('.submit-button')次に、ID属性値を使用して呼び出すURLを定義しながら、次のようにハンドラーをハングアップします。

$('.submit-button').on('click', function(){
    $action = $(this).attr('id'); //lets say the ID's value is 'delete_project'
    $url = 'http://myapp.co.uk/ajax/' + $action;
    // Ajax request to http://myapp.co.uk/ajax/delete_project is done
});

とにかく、デスクトップのような傾向のあるWebアプリケーションは、JSの束であり、いくつかのPHPが背後にあるHTMLはほとんどありません...それは常にひどく保守可能です...

私はこれに[extJs][1]を一度使用しました。これにより、jQueryとそのモジュールのみが使用され、書き込みにHTMLは必要ありませんでした...

于 2012-11-26T16:45:01.583 に答える
0

コピーアンドペーストソリューションではありませんが、REST APIの構築方法を探すときに、スケーラブルなクライアントサーバーアプリケーションを構築する方法についてさらにいくつかのアイデアが見つかるかもしれません。このようなアプリを構築するときにサーバー側のAPIを明確に保つには、RESTが非常に優れた構造であることがわかります。また、対応するクライアント部分をクリーンに実行する方法に関するチュートリアルもあると確信しています。

于 2012-11-26T16:48:58.070 に答える
0

私のアプリケーションでは、かなり多くのajax呼び出しも行います。物事を行う最も簡単な方法は、次のようなすべてのajax呼び出しのラッパーを自分で作成することであることがわかりました。

var MySite = function（）
{{

    AjaxWrapper：function（type、url、data、callback、noloading）
    {{

        $ .ajax（{
            タイプ：タイプ、
            url：url、
            データ：データ、
            成功：関数（json）
            {{

                if（json.status === true）
                {{

                    if（typeof callback ==='関数'）
                    {{

                        callback（json）;

                    } そうしないと {

                        //一般的な成功ハンドラ

                    }

                } そうしないと {

                    //エラーハンドラ

                }

            }
        }）;

    };

}（）;

それからあなたはそれを次のように呼ぶでしょう：

MySite.AjaxWrapper（ "GET"、 "somehref"、{}、function（json）
{{

    //jsonにはjsonコールバックの結果があります
    //これを別の関数にすることもできます
    //または持っていない

}）;

これで、あなたが望むほとんどすべてのものにあなたのajaxを呼びましょう。次に、データ属性のようなものを使用するか、ajaxを必要とするものには標準のhrefを使用して、この関数を通過するすべてのリンクにイベントを追加できます。または、特定のことを実行したい場合は、コールバック関数をそれらとは異なるものにします。

これを説明するのは難しいと思いますが、これは私がいくつかのajaxが豊富なプロジェクトに使用したものであり、非常に簡単になります。

あなたのケースの例として、次のようなものを使用できます。

$（'a [class | = "delete"]'）。on（ "click"、function（）
{{

    MySite.AjaxWrapper（ "POST"、$（this）.attr（ "href"）、{param：number1}、DeleteHandler）;

}）;
于 2012-11-26T16:51:54.037 に答える
0

私がこれを行う方法は、すべてのアクションに対して単一の関数を持つことです。

$('.actions').on('click', function (e) {
    e.preventDefault();
    var action = $(this).data('action'),
        id = $(this).data('id');

    $.get('/local/handler.php', {
        'action': action,
        'id': id
    }, function () {
        // Callback stuff here
    });

});

そしてHTML：

<a href="#" class="actions" data-action="delete-project" data-id="<?=$project_id?>">Delete Project</a>

<a href="#" class="actions" data-action="delete-user" data-id="<?=$user_id?>">Delete User</a>

<a href="#" class="actions" data-action="delete-keyword" data-id="<?=$keyword_id?>">Delete Keywork</a>

actionまた、PHPファイルには、要求されたアクションを実行するパラメーターに基づくifステートメントが含まれている必要があります。

編集：

  • このように、アクションを削除するだけでなく、将来的にアプリを拡張できます。

  • また、さまざまなアクションが大きなリストになる場合（たとえば、多くの種類の削除、更新、追加）、アクションごとに個別のPHPファイルを作成し、includeそれらを1つのマスターファイルに作成します。これにより、簡単にスケーリングできます。

于 2012-11-26T16:55:15.010 に答える