ajax 相关问题

更新和过滤 Laravel 数据表

我想返回一个数据表，其中包含数组中的集合，我可以从浏览器的网络检查器中看到响应和预览选项卡，所有数据都显示在那里，但出于某些原因...

在 ASP.NET CORE 中使用滑块过滤价格

我正在尝试使用滑块进行价格过滤。景色将会是这样的。我使用ajax来填充价格。这是滑块和产品视图的代码： 我正在尝试使用滑块进行价格过滤。看到的景色会是这样的。我使用ajax来填充价格。这是滑块和产品视图的代码： <div class="price-filter"> <div id="price-slider"></div> <div class="input-number price-min"> <input id="price-min" type="number"> <span class="qty-up">+</span> <span class="qty-down">-</span> </div> <span>-</span> <div class="input-number price-max"> <input id="price-max" type="number"> <span class="qty-up">+</span> <span class="qty-down">-</span> </div> </div> //product <div id="store" class="col-md-9"> <div class="row"> <!-- product --> @foreach (var item in Model.Take(6)) { <div class="col-md-4 col-xs-6"> <div class="product"> <a href="/post/@SlugGenerator.SlugGenerator.GenerateSlug(item.ProductName)[email protected]().ProductVariations.FirstOrDefault().ProductVarId" /> <div class="product-img"> <img src="~/Contents/img/@item.ProductItems.FirstOrDefault().Image1" width="200" height="200" alt=""> <div class="product-label"> <span class="sale">-30%</span> <span class="new">NEW</span> </div> </div> <div class="product-body"> @* <p class="product-category">@item.Category.CategoryName.ToUpper()</p> *@ <h3 class="product-name"><a href="#">@item.ProductName.ToUpper()</a></h3> <h4 class="product-price">[email protected]<del class="product-old-price">@* $@(item.Product.Price + 200) *@</del></h4> <div class="product-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-btns"> <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button> <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button> </div> </div> </div> </div> } <!-- /product --> </div> </div> ajax 代码，因此可以按价格过滤产品，而无需重新加载页面： <script> $(function () { $("#price-slider").slider({ range: true, min: 100000, max: 2000000, values: [100000, 2000000], slide: function (event, ui) { $("#price-min").val(ui.values[0]); $("#price-max").val(ui.values[1]); }, stop: function (event, ui) { var min = ui.values[0]; var max = ui.values[1]; var cateid = $('#category-id').val(); $.ajax({ url: '@Url.Action("FilterByPrice", "ProductView")', type: 'GET', data: { minPrice: min, maxPrice: max, categoryId: cateid }, success: function (productlist) { var newproductrow = ""; $.each(productlist, function (index, item) { newproductrow += '<div class="col-md-4 col-xs-6">'; newproductrow += '<div class="product">'; newproductrow += '<a href="/post/' + item.SlugGenerator.SlugGenerator.GenerateSlug(item.ProductName) + '-' + item.ProductItems[0].ProductVariations[0].ProductVarId + '">'; newproductrow += '<div class="product-img">'; newproductrow += '<img src="~/Contents/img/' + item.ProductItems[0].Image1 + '" width="200" height="200" alt="">'; newproductrow += '<div class="product-label">'; newproductrow += '<span class="sale">-30%</span>'; newproductrow += '<span class="new">NEW</span>'; newproductrow += '</div>'; // Close product-label newproductrow += '</div>'; // Close product-img newproductrow += '<div class="product-body">'; newproductrow += '<h3 class="product-name"><a href="#">' + item.ProductName.toUpperCase() + '</a></h3>'; newproductrow += '<h4 class="product-price">$' + item.Price + '<del class="product-old-price">$' + (item.Price + 200) + '</del></h4>'; newproductrow += '<div class="product-rating">'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '</div>'; // Close product-rating newproductrow += '<div class="product-btns">'; newproductrow += '<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>'; newproductrow += '<button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>'; newproductrow += '<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>'; newproductrow += '</div>'; // Close product-btns newproductrow += '</div>'; // Close product-body newproductrow += '</div>'; // Close product newproductrow += '</div>'; // Close col-md-4 }); $("#store .row").html(newproductrow); } }); } }); }); </script> 控制器过滤价格： [HttpGet] public IActionResult FilterByPrice(int minPrice, int maxPrice, int categoryId) { var filteredProducts = _context.Products .Where(p => p.Price >= minPrice && p.Price <= maxPrice && p.CategoryId == categoryId) .ToList(); return new JsonResult(filteredProducts); } 但是当我调整那个栏时，什么也没有发生。我打开网络并选择Fetch/XHR，当我调整栏时，我看到有一个json返回。 json 返回： { "$id": "1", "$values": [ { "$id": "2", "productId": 8, "productName": "POSEE", "categoryId": 4, "price": 400000, "description": null, "brand": 5, "brandNavigation": null, "category": null, "productItems": { "$id": "3", "$values": [] } }, { "$id": "4", "productId": 9, "productName": "ShondoHCM", "categoryId": 4, "price": 500000, "description": null, "brand": 11, "brandNavigation": null, "category": null, "productItems": { "$id": "5", "$values": [] } }, { "$id": "6", "productId": 10, "productName": "BITIS", "categoryId": 4, "price": 800000, "description": null, "brand": 4, "brandNavigation": null, "category": null, "productItems": { "$id": "7", "$values": [] } } ] } 有人知道为什么产品不按价格显示的问题吗？我相信这是关于 for 循环的。我真的很感谢任何指导。谢谢你 该错误很可能是因为您在 jQuery 代码中使用 PascalCase 属性，并且以驼峰命名法接收 JSON。要修复它，请将脚本更改为： <script> $(function () { $("#price-slider").slider({ range: true, min: 100000, max: 2000000, values: [100000, 2000000], slide: function (event, ui) { $("#price-min").val(ui.values[0]); $("#price-max").val(ui.values[1]); }, stop: function (event, ui) { var min = ui.values[0]; var max = ui.values[1]; var cateid = $('#category-id').val(); $.ajax({ url: '@Url.Action("FilterByPrice", "ProductView")', type: 'GET', data: { minPrice: min, maxPrice: max, categoryId: cateid }, success: function (productlist) { var newproductrow = ""; $.each(productlist, function (index, item) { newproductrow += '<div class="col-md-4 col-xs-6">'; newproductrow += '<div class="product">'; newproductrow += '<a href="/post/' + item.SlugGenerator.SlugGenerator.GenerateSlug(item.productName) + '-' + item.productItems[0].productVariations[0].productVarId + '">'; newproductrow += '<div class="product-img">'; newproductrow += '<img src="~/Contents/img/' + item.productItems[0].image1 + '" width="200" height="200" alt="">'; newproductrow += '<div class="product-label">'; newproductrow += '<span class="sale">-30%</span>'; newproductrow += '<span class="new">NEW</span>'; newproductrow += '</div>'; // Close product-label newproductrow += '</div>'; // Close product-img newproductrow += '<div class="product-body">'; newproductrow += '<h3 class="product-name"><a href="#">' + item.productName.toUpperCase() + '</a></h3>'; newproductrow += '<h4 class="product-price">$' + item.price + '<del class="product-old-price">$' + (item.price + 200) + '</del></h4>'; newproductrow += '<div class="product-rating">'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '<i class="fa fa-star"></i>'; newproductrow += '</div>'; // Close product-rating newproductrow += '<div class="product-btns">'; newproductrow += '<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>'; newproductrow += '<button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>'; newproductrow += '<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>'; newproductrow += '</div>'; // Close product-btns newproductrow += '</div>'; // Close product-body newproductrow += '</div>'; // Close product newproductrow += '</div>'; // Close col-md-4 }); $("#store .row").html(newproductrow); } }); } }); }); 此行也会抛出错误： newproductrow += '<a href="/post/' + item.SlugGenerator.SlugGenerator.GenerateSlug(item.productName) + '-' + item.productItems[0].productVariations[0].productVarId + '">'; 最好在后端调用SlugGenerator.GenerateSlug，如下所示： [HttpGet] 公共异步任务 FilterByPrice(int minPrice, int maxPrice, int CategoryId) { var filteredProducts = await _context.Products .Where(p => p.Price >= minPrice && p.Price <= maxPrice && p.CategoryId == categoryId) .Select(m => new ProductView { Brand = m.Brand, BrandNavigation = m.BrandNavigation, Category = m.Category, CategoryId = categoryId, Description = m.Description, Id = m.Id, Price = m.Price, ProductId = m.ProductId, ProductItems = m.ProductItems, ProductName = m.ProductName, //Here to generate SlugName using SlugGenerator (Note that method must be static) SlugName = Item.SlugGenerator.GenerateSlug(m.ProductName), }) .ToListAsync(); return new JsonResult(filteredProducts); } 并在 jQuery 中将该行更改为 newproductrow += '<a href="/post/' + item.slugName + '">';

从ajax调用Web API

我在.NET中有以下代码： // 获取 api/EmailValidationStaging/5 公共电子邮件验证 GetEmailValidation（长 ID） 这是一个 GET 方法，我可以这样调用它： $("#buttonFIND").c...

是否可以使用AJAX和PHP实现实时搜索

我正在尝试使用 PHP 和 AJAX 制作一个网络应用程序。它应该从 Elasticsearch 检索数据而不刷新页面（实时搜索）。在elasticsearch上是否可以实现这样的检索...

控制器方法接收 Ajax 发送的数据为 null

我有一个简单的控制器方法，期望接收一个字符串参数： 公共类 ZTest ：BaseController { [http邮报] 公共异步任务测试（stri...

使用 Ajaxate 的 Shopify 无限滚动在应用过滤器后停止工作

{% 如果模板包含“集合”%} document.addEventListener("DOMContentLoaded", function() { var 无休止的滚动 = 新的 Ajaxate({ 容器：'#product-grid...</desc> <question vote="0"> <pre><code> {% if template contains &#39;collection&#39; %} &lt;script&gt; document.addEventListener(&#34;DOMContentLoaded&#34;, function() { var endlessScroll = new Ajaxinate({ container: &#39;#product-grid&#39;, pagination: &#39;#Huratips-Pagination&#39;, loadingText: `&lt;div class=&#34;loading&#34; style=&#34;text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;&#34;&gt; &lt;span style=&#34;height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);&#34;&gt;&lt;/span&gt; &lt;span&gt;Loading more products&lt;/span&gt; &lt;/div&gt;` }); }); &lt;/script&gt; {% endif %} </code></pre> <p>我已经在我的shopify商店上编写了用于无限滚动的代码，但是在应用排序或过滤器后，该代码停止工作，可能我认为这是由于当我们在shopify中应用排序或过滤时，它会重新加载类下的内容。 Product-grid-container 并替换整个 html，这就是为什么 #product-grid 及其内容是新的，因此它在应用排序或过滤后停止工作，有什么方法可以处理这种情况吗？</p> <p><a href="https://i.stack.imgur.com/ITYXJ.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0lUWVhKLnBuZw==" alt=""/></a></p> <p>在这张图片中，我展示了重新加载 .product-grid-container .collection 下的整个内容，我在 shopify 中使用聚光灯主题。</p> <p>提前感谢您的帮助..:)</p> </question> <answer tick="false" vote="0"> <p>看来你的分析是正确的。当您在 Shopify 中应用排序或过滤时，ID 为 #product-grid 的容器内的内容将被替换，这会破坏 Ajaxate 设置的功能，因为新内容没有附加必要的事件侦听器。</p> <p>要处理这种情况，您需要在应用排序或过滤后重新初始化 Ajaxate。您可以通过监听排序或过滤机制触发的事件来完成此操作，然后在这些事件发生时重新初始化 Ajaxate。</p> <p>以下是如何修改代码来实现此目的：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>{% if template contains &#39;collection&#39; %} &lt;script&gt; document.addEventListener(&#34;DOMContentLoaded&#34;, function() { // Function to initialize Ajaxinate function initializeAjaxinate() { var endlessScroll = new Ajaxinate({ container: &#39;#product-grid&#39;, pagination: &#39;#Huratips-Pagination&#39;, loadingText: `&lt;div class=&#34;loading&#34; style=&#34;text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;&#34;&gt; &lt;span style=&#34;height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);&#34;&gt;&lt;/span&gt; &lt;span&gt;Loading more products&lt;/span&gt; &lt;/div&gt;` }); } // Initialize Ajaxinate on page load initializeAjaxinate(); // Listen for events that indicate sorting or filtering is applied // Assuming you have some sort of event that triggers after sorting/filtering // Replace &#39;your-sorting-event&#39; with the actual event name document.addEventListener(&#39;your-sorting-event&#39;, function() { // Reinitialize Ajaxinate after sorting or filtering is applied initializeAjaxinate(); }); }); &lt;/script&gt; {% endif %}</code></pre> </div> </div> <p></p> <p>将“your-sorting-event”替换为 Shopify 在应用排序或过滤后使用的实际事件名称或触发器。如果您使用 JavaScript 来处理排序/过滤，这可能是自定义事件；如果您使用的是 Shopify 库或框架，则它可能是由 Shopify 库或框架提供的事件。</p> <p>这样，每次应用排序或过滤时，Ajaxate 都会重新初始化，确保即使在内容被替换后，无限滚动也能继续工作。</p> </answer> </body></html>

通过jquery $.post上传文件

为了发送ajax表单，我使用以下代码： 注意：不使用“FORM”标签 我的 jQuery 代码： var file = $('#file').val(); $.post('form.php', {file:file},

在 Chrome 中使用本地文件的 jQuery getJSON 问题

我有一个非常简单的测试页面，它使用带有 jQuery 的 $.getJSON 和 $.ajax 方法的 XHR 请求。同一页面在某些情况下有效，但在其他情况下则无效。具体来说，它在 Chrome 中不起作用...

动态添加幻灯片到 Reveal.js 幻灯片

我正在尝试编写一个函数，该函数将使用从本地图像文件夹中提取的内容为我的幻灯片动态创建幻灯片。我尝试了从 php 到 ajax 的几种不同脚本，但没有任何效果

如何使用Android和AJAX在网站上上传图像？

我有一个小网站，我想从服务器端制作一个上传页面。以下代码使用 ajax，并可在经典笔记本电脑上与 Chrome 配合使用。下面的代码显示图片并上传。 ...

使用 Ajax 时，Laravel 中的 Modal Flowbite 无法关闭

我使用 Flowbite 制作一个模态并使用 Ajax 显示它，因为我想将数据传递到模态主体内部。该模式工作正常，但按下关闭按钮时无法关闭。 这是我的代码：...

在自定义搜索中包含高级自定义字段 (ACF) - WordPress

我已经通过我的博客的指定类别创建/混合了一个很酷的搜索。使用 Ajax 加载结果而无需重新加载。 当我搜索时 - 无论我搜索什么词。我全部收到了

Shopify：创建自定义流程来创建客户（其他元字段）

我想创建一个自定义表单供用户注册，因为我需要客户的生日。 所以我需要用户输入他的生日作为必填字段，并且我需要检查用户是否...

在 Laravel 10 中为客户及其联系人创建依赖下拉菜单

我一直在尝试创建两个下拉选择来创建订单（pedido），其中第一个选择用于客户（clientes），第二个选择用于客户的联系人（contatos）。 （cli...

Magento 获取购物车中最后添加的产品选项

我正在使用ajax将产品添加到购物车。当新产品添加到购物车时，我想在右侧边栏上显示其详细信息。我可以列出简单的产品，但无法显示捆绑产品

在 AJAX 请求中使用速记帖子时，FormData 出现非法调用错误

尝试使用简写语法在使用 jQuery 的 AJAX 请求中上传文件来发送表单数据时，遇到错误“非法调用”。然而，错误

如何用flask实现无限滚动？ （htmx或其他方法）

这是获取帖子信息的代码。我在 stackoverflow 上看到了一些东西，但没有一个真正解决了 htmx 无限滚动的核心示例。 {% 发帖...

我在使用 Laravel 10 和 Ajax 进行选择下拉列表时遇到一些问题

所以，我是 Laravel 的新手，我的英语不是很好，所以请原谅我的任何语言错误。我一直在尝试创建两个选择下拉列表来创建订单（pedido），其中第一个选择...

Laravel 通过（扩展 FormRequest 类）方法验证表单请求

我通过创建自己的 UserStoreRequest 类（扩展了 FormRequest 类）在 Laravel 中实现了表单验证。我正在使用阿贾克斯。顺便说一句，每当验证失败时，Laravel 都会自动...

Primefaces fileUpload - ajax 调用哪个事件

我正在使用 Primefaces 5.3，我想在上传文件时进行 ajax 调用 我正在使用 Primefaces 5.3，我想在上传文件时进行 ajax 调用 <p:fileUpload id="fileUp" fileUploadListener="#{carEditDocumentController.handleFileUpload}" label="#{msg['document.selectDocument']}" auto="true" required="true" requiredMessage="#{msg['error.required']}" mode="advanced" skinSimple="true" update="carDocumentNewName"> <p:ajax listener="#{carEditDocumentController.checkDocument()}" event="???" update="carDocumentError"/> </p:fileUpload> 上传文件时需要执行哪个事件监听？ 谢谢你。 我不知道有任何相关事件。但我相信还有其他两种选择： 只需从 fileUploadListener 调用 checkDocument() 即可。 在oncomplete中调用remoteCommand： <p:fileUpload ... oncomplete="rc()" /> <p:remoteCommand name="rc" update="carDocumentError" actionListener="#{carEditDocumentController.checkDocument()}" /> 您可以使用 valueChangeListener 属性，该属性在执行侦听器方法后执行，在本例中它将加载文件。 一个例子是这样的： <p:fileUpload ... oncomplete="rc()" valueChangeListener="#{carEditDocumentController.checkDocument()}" />