Question

我正在制作一个Web应用程序来为客户订购商品，在左侧有一个元素，其中列出了所有当前订单（这实际上仅适用于管理，但现在无关紧要。）

在右侧还有一个空的元素，只要您点击其中一个订单，该订单的详细信息就会加载到该订单中。我正在用这段代码做到这一点：

function select_row() {
    var order_id = $(this).attr("data-order-index");
    $.ajax({
        url: "includes/functions/order.php",
        data: {order_id: order_id},
        success: function (data) {
             $("#order-information").html(data);
        }
    });
}

我通过这样做来调用这个方法：

$("#order-list tbody tr").click(select_row);

其中的PHP文件如下所示：

echo "This is order ID: , " . $_GET['order_id'];
echo "Etc etc doesnt matter";

问题

select_row方法非常慢，实际加载其他元素中的内容至少需要几秒钟。

有没有办法让这更快？
每当我向该方法添加更多代码时（假设我想说明当前行是活动的，我给它一个类给它一个特定的颜色）它不执行给出的代码我把它放在$.ajax部分下面的课程。当我将其他代码放在$.ajax部分之上时，它会执行它。但它没有执行$.ajax部分。

示例：

function select_row() {
    var order_id = $(this).attr("data-order-index");
    $(this).addClass("selectedRow");
    $(".selectedRow", $(this).parent).removeClass("selectedRow");
    $("#delete-order-btn").prop("disabled", false);
    $.ajax({
        url: "includes/functions/order.php",
        data: {order_id: order_id},
        success: function (data) {
            $("#order-information").html(data);
        }
    });
}

这是怎么来的，我该如何预防呢？

Answer 1

我看到三个可能的错误：

this的值可能不是您所期望的
当您可能需要使用$(this).parent

$(this).parent()

您正在设置新的selectedRow，然后清除所有selectedRows。你需要扭转这个顺序。

在你的第二个select_row()函数中，this的值可能不是你想象的那样，而这可能是导致它产生错误的原因。

在javascript中，this的值取决于函数的调用方式，常规函数调用会将this重置为全局对象（浏览器中的window）或如果以严格模式运行，则为undefined。因此，在您的函数中this可能是window。

您没有告诉我们您在哪里调用select_row()函数，但可能的解决方案是将您要操作的对象作为参数传递给select_row()。

您似乎还有一些错误的代码：

$(this).parent

不是DOM元素或jQuery对象 - 它是方法引用。要获取实际的父对象，您必须使用：

$(this).parent()

我建议的是这个清理过的代码：

function select_row(row) {
    var item = $(row);

    // remove previous selectedRow before setting new selectedRow
    item.parent().find(".selectedRow").removeClass("selectedRow");

    // set new selected row
    item.addClass("selectedRow");

    $("#delete-order-btn").prop("disabled", false);
    $.ajax({
        url: "includes/functions/order.php",
        data: {order_id: item.attr("data-order-index")},
        success: function (data) {
            $("#order-information").html(data);
        }
    });
}

然后，当您致电select_row时，您会将新选定的行传递给它。

至于性能问题，这在很大程度上取决于您的后端PHP /数据库以及客户端和后端之间的网络连接。在一个体面的网络连接上进行快速的Ajax调用，其中服务器体系结构非常灵敏，并且几乎可以立即返回来自缓存或内存的数据，可以在一秒钟内快速执行。如果您的数据库查询需要几秒钟，而您的服务器响应开销是一两秒，那么整个Ajax调用开始看起来像3-5秒。

我们真的无法告诉您您提供的信息量有限的时间。您的第一步是量化请求的各个部分的确切时间，并查看流程的哪个部分花费的时间最多。您可以使用Chrome调试器中的网络选项卡从浏览器的角度查看Ajax调用时间，并且可以在PHP文件中添加一些时序数据记录，以查看它所花费的时间。两者之间的区别在于服务器基础架构（获取PHP文件然后返回客户端的时间）以及部分网络传输时间。

使用AJAX的jQuery只执行部分代码

1 个答案: