Question

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

首先，首先，我将如何将刚刚制作的评级恢复到服务器。在我的$（document）.ready事件处理程序中，我将更改事件处理程序添加到所有＆lt; select＆gt;页面中具有包含ddlRatingOptions的id的元素。在事件处理程序中，我获得与已更改的下拉列表关联的ProductID和Rating。然后我将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调用响应的一部分返回，但是让我感到震惊的是我不确定如何引用＆lt; div＆gt;包含该产品的平均评级。

我现在的作品，但感觉就像一个黑客。我希望有一种更简单的方法。简而言之，我找到了＆lt; div＆gt;然后在发出ajax请求时将其id发送到服务器。服务器端代码回复它（以及平均评级）。然后，在成功事件处理程序中，找到＆lt; div＆gt;通过回显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');
        }
    });
});

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

有更简洁的方法吗？

谢谢！

Answer 1

为什么不将元素存储到变量中？这将它扩展到外部函数，使其可用于内部（成功）函数。你已经（有点）使用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');
        }
    });
});

我添加.eq(0)以确保我们只抓取第一个元素（无论如何都会将其ID属性发送到服务器）。

Answer 2

我不确定我是否做对了，但你为什么不直接使用本地var中的id？

像 $("#" + currentRating.attr('id')).text(results.AverageRating + ' Stars');

jQuery ajax调用完成后更新div

2 个答案: