jquery - jQuery ajax 调用完成后更新 div

Question

我有一个页面，显示产品网格，该网格是根据数据库查询以编程方式在服务器端填充的。在每个网格单元中，我都有一个下拉列表，用户可以在其中对产品进行评分。我还在每个网格单元中有一个

显示当前的平均评分。我的目标是在选择评级时触发 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 发送到服务器。服务器端代码会回显它(以及平均评分)。然后，在成功事件处理程序中，通过回显的 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(这只是从发送到服务器)。有没有更干净的方法来做到这一点？谢谢! 最佳答案 为什么不将元素存储到变量中？这会将其范围限定为外部函数，使其可供内部(成功)函数使用。您(在某种程度上)已经使用 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 属性无论如何都会发送到服务器)。 关于jquery - jQuery ajax 调用完成后更新 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3663396/ 上一篇：JQuery:选择一个名称的多个选择标签 下一篇：jquery - 使用 jquery 重新加载多网络摄像头(jpg) IMG 相关文章： php - 垂直对齐 div 但保持水平位置不变 javascript - 如何通过javascript/jquery获取单元格中的元素行？ javascript - 在 AJAX 回调中检索 JSON 编码的数据 android - 图片未显示在 Phone Gap 应用程序中 javascript - Django 管理模板中的多个版本的 jQuery javascript Bootstrap Accordion php - 使用 ajax 将 jquery 脚本中的值传递到另一个 php 文件 javascript - 在 JSON 数组中搜索字符串并检索包含该字符串作为值的对象 javascript - 在 slickgrid 中手动触发事件 javascript - 更新动态 HTML 文件 ©2023 IT工具网  联系我们