php - PHP/AJAX 应用结构

Question

我正在开发一个 PHP / AJAX 应用程序，它很快变得难以管理！

该应用程序的设计与桌面应用程序非常相似，因此几乎每个用户操作都会导致 AJAX 调用。

对于这些操作中的每一个，我都有一些 jQuery 将数据发布到我的 PHP 脚本并运行相应的 PHP 函数来处理服务器端操作。

这意味着在我的 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
});

我确信有更好的做事方式，但是通常如何避免大量类似的代码呢？上述操作可能会合并到一个“删除”ajax 请求中，该请求发布项目类型和数据库 ID，但我的许多函数发布不同的数据并需要不同的参数，因此在一个 jQuery 处理程序下不太适合。

我已经尝试找到一些关于如何将 AJAX 应用程序组合在一起的资源，但我能找到的只是关于发出 AJAX 请求等的初学者教程，而不是如何编写可扩展的 AJAX 应用程序。

为了清楚起见，我知道 AJAX 是如何工作的，我只是想找到实现它的最佳方法，以尽可能减少所需的 jQuery 和 PHP。

有什么好的资源可以处理这种事情吗？

score 2 · Accepted Answer

您可以通过使用 HTML 中的属性将所有这些合并到一个删除函数中，例如：

$('.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>

有关数据属性的更多信息

score 2 · Accepted Answer

不确定这是否会有所帮助，但您可以创建一些函数来随着代码的增长而减少代码。对于初学者，您可以通过将 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 调用创建类似的函数。然后，您可以动态构建 click 函数以进一步减少您的代码：

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() {

}

score 0 · Accepted Answer

In my application I do quite a lot of ajax calls too. I found that the easiest way to do things was to create myself a wrapper for all ajax calls such as:

var MySite = function()
{

    AjaxWrapper : function(type,url,data,callback,noloading)
    {

        $.ajax({
            type: type,
            url: url,
            data: data,
            success:function(json)
            {

                if(json.status === true)
                {

                    if(typeof callback === 'function')
                    {

                        callback(json);

                    } else {

                        // A generic success handler

                    }

                } else {

                    // An error handler

                }

            }
        });

    };

}();

then you'd call it like:

MySite.AjaxWrapper("GET", "somehref", {}, function(json)
{

    // json has the result of your json callback
    // you could also make this a separate function
    // or not have it

});

this let's you call your ajax on just about anything you want. You could then use something like data attributes, or just the standard href for anything that requires ajax and add an event to all links that pass through this function. Or, if you wanted some to do certain things just make the callback function different for those.

I'm finding this hard to explain, but this is what I've used for a couple of ajax-rich projects and it makes things so much easier!

For an example for your case you could then use something like:

$('a[class|="delete"]').on("click", function()
{

    MySite.AjaxWrapper("POST", $(this).attr("href"), {param:number1}, DeleteHandler);

});

score 0 · Accepted Answer

我这样做的方法是为所有操作提供一个功能：

$('.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>

PHP 文件应该有基于action执行请求操作的参数的 if 语句。

编辑：

这样您就不仅限于删除操作，因此您可以在将来扩展您的应用程序。
此外，如果不同的操作变成一个大列表（例如，多种删除、更新、添加），我将为每个操作创建一个单独的 PHP 文件，并将include它们放在一个主文件中。这将允许轻松缩放。

score 0 · Accepted Answer

您可以为该按钮设置一个 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 和少量 HTML，后面还有一些 PHP ......这总是很糟糕的可维护性......

我为此使用了 [extJs][1] 一次，这导致只使用 jQuery 及其模块，而无需（或只需要最少的）HTML 即可编写...

score 0 · Accepted Answer

不是复制粘贴解决方案，但在寻找如何构建 REST API 时，也许您会发现更多关于如何构建可扩展的客户端-服务器应用程序的想法。我发现 REST 是一个非常好的结构，可以在构建此类应用程序时保持清晰的服务器端 API，而且我确信也有关于如何干净地完成相应客户端部分的教程。

php - PHP/AJAX 应用结构

6 回答 6

Related

Reference