jQueryAjax调用完成后更新div

我有一个页面，其中显示了基于数据库查询在服务器端以编程方式填充的产品网格。在每个网格单元中，我都有一个下拉列表，用户可以在其中对产品进行评分。我在每个网格单元中都有一个显示当前平均评级的图标。我的目标是在选择评级时触发ajax调用，该评级将更新后端的数据库。然后我想更新平均评分以显示新的平均值。有道理吗

首先，下面是我如何将刚刚制作的评级返回到服务器的方法。在$document.ready事件处理程序中，我向页面中id包含ddlRatingOptions的所有元素添加了一个更改事件处理程序。在事件处理程序中，我获取与已更改的下拉列表关联的ProductID和评级。然后我向服务器回拨ajax，传递值

$("#products select[id*='ddlRatingOptions']").change(function () {
    // Determine the ProductID for the product that was just rated
    var productId = $(this).attr('ProductID');
    var rating = $(this).val();

    // Send the rating and productId back to the server
    $.ajax({
        url: '<%=Page.ResolveClientUrl("~/Services/RateProduct.ashx") %>',
        data: {
            ProductID: productId,
            Rating: rating
        },
        cache: false,
    });
});

这很有效

不过，我现在需要的是恢复平均评分并更新用户界面。作为ajax调用响应的一部分，我可以轻松返回平均评级，但让我感到困惑的是，我不确定如何引用包含此产品平均评级的

我现在所拥有的一切都很管用，但感觉像是一次黑客攻击。我希望有更简单的方法。简而言之，我找到了，然后在发出ajax请求时将其id发送给服务器。服务器端代码将其与平均评级一起回显。然后，在success事件处理程序中，我通过该回显id找到并相应地更新其文本

$("#products select[id*='ddlRatingOptions']").change(function () {
    ...

    // Determine the "Current Average Rating" element that needs to be updated after the ajax call completes
    var currentRating = $(this).parent().siblings(".currentRating");

    $.ajax({
        url: '<%=Page.ResolveClientUrl("~/Services/RateProduct.ashx") %>',
        data: {
            ProductID: productId,
            Rating: rating,
            CurrentRatingId: currentRating.attr('id')
        },
        cache: false,
        dataType: 'json',
        success: function (results) {
            // Update the current rating with the new average rating              
            $("#" + results.CurrentRatingId).text(results.AverageRating + ' Stars');
        }
    });
});

如您所见，当前平均评级id被传递给服务器，成功事件处理程序被传递给一个JSON对象，该对象包含两个属性：AverageRating和CurrentRatingId，这两个属性只是从发送到服务器的内容中回显

有没有更干净的方法

---

谢谢

为什么不将元素存储到变量中？这将把它的范围扩大到外部函数，使其可用于内部success函数。您已经在使用currentRating变量执行此操作，因此这只是以后重新使用该变量的一种情况，而不是查找ID：

$("#products select[id*='ddlRatingOptions']").change(function () {
    ...

    // Determine the "Current Average Rating" element that needs to be updated after the ajax call completes
    var currentRating = $(this).parent().siblings(".currentRating").eq(0);

    $.ajax({
        url: '<%=Page.ResolveClientUrl("~/Services/RateProduct.ashx") %>',
        data: {
            ProductID: productId,
            Rating: rating,
            // Do you need this now?
            CurrentRatingId: currentRating.attr('id')
        },
        cache: false,
        dataType: 'json',
        success: function (results) {
            // Update the current rating using the variable we stored above    
            currentRating.text(results.AverageRating + ' Stars');
        }
    });
});

---

我添加了.eq0以确保我们只获取ID属性将被发送到服务器的第一个元素。

我不确定是否正确，但为什么不使用本地变量的ID呢

像 $+currentRating.attr'id'.textresults.AverageRating+'Stars'；

---

太好了！我没有意识到ajax调用中的success函数可以引用在其堆栈之外定义的变量。这里有没有担心事情会变得混乱，比如如果用户在第一个评级请求传输之前快速连续进行两次评级？或者如果有两个快速评级，并且第二个评级响应在第一个评级响应之前返回？还是我想得太多了？@Scott：每次单独的函数调用都会创建一个新的闭包，包含该闭包中的所有局部变量。对同一函数的新调用意味着新的闭包、新的变量和新的请求。我建议阅读JavaScript中的函数范围。这是一个很好的开始：-谢谢你的跟进。诚然，闭包和JavaScript的作用域规则对我来说仍然是一个弱点，我将查看您推荐的链接。再次感谢。请看我对Andy E答案的评论。Thankseach currentRating将是每次呼叫的新var，因此您是安全的