jQuery with AJAX 只执行一部分代码

jQuery with AJAX only executing a part of the code

本文关键字：一部分 代码 执行 with AJAX jQuery      更新时间：2023-09-26

我正在制作一个 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);
        }
    });
}

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

我看到三个可能的错误：

  1. this的价值可能不是你期望的
  2. 当您可能需要使用$(this).parent()时，您正在使用$(this).parent
  3. 您正在设置新的选定行，然后清除所有选定的行。 您需要颠倒该顺序。

在第二个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 文件然后返回客户端的时间(，部分是网络传输时间。

相关文章：