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所需的最佳方法来实现它。

有没有什么好的资源可以处理这类事情？

Answer 1

您可以使用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>

More information on data-attributes

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

}

Answer 3

您可以为该按钮和submit-button等类设置ID属性。

然后在$('.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来编写...

Answer 4

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

Answer 5

在我的应用程序中，我也做了很多ajax调用。我发现最简单的方法是为所有ajax调用创建一个包装器，例如：

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

                }

            }
        });

    };

}();

然后你会把它称为：

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

});

这个让你在任何你想要的东西上调用你的ajax。然后，您可以使用类似于数据属性的内容，或者仅使用标准href来处理需要ajax的任何内容，并将事件添加到通过此函数的所有链接。或者，如果你想让某些人做某些事情，那就让那些回调函数不同。

我发现这很难解释，但这是我用于几个ajax丰富项目的东西，它让事情变得如此简单！

对于您的案例，您可以使用以下内容：

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

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

});

Answer 6

我这样做的方法是为所有动作设置一个函数：

$('.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个。这样可以轻松扩展。

PHP / AJAX应用程序结构

6 个答案: