ajax 相关问题

AJAX（异步JavaScript和XML）是一种通过客户端和服务器之间的异步数据交换来创建无缝交互式网站的技术。 AJAX有助于与服务器进行通信或部分页面更新，而无需传统的页面刷新。

自定义 woocommerce/plugin/checkout/review.order.php

我正在使用以下代码自定义 woocommerce checkout review-order.php，但加载后它会加倍，付款请... 我正在使用以下代码自定义 woocommerce checkout review-order.php，但加载后它会加倍， <table> <center><h4>MAKE PAYMENT</h4> <p>Please select the following payment method</p> </table> 注意：如果我在主题 function.php 文件中添加任何过滤器，我的结帐页面会继续加载，我不知道为什么？请大家帮忙！谢谢你我已经尝试过你的代码，它在我最后工作得很好，但我认为问题是你忘记关闭 <center> 标签。关闭它，这可能会解决你的问题。为了比我的评论更清楚，您需要从后端处理自定义表发生的情况。给你的桌子一个ID <table ID="MyCustomTableId"> <center><h4>MAKE PAYMENT</h4></center> <center><p>Please select the following payment method</p></center> </table> 从后端查看 asset/js/frontend/checkout.js 中的触发器：初始化_结账更新_结账更新_结账结账错误在 AJAX 回调中，处理您的表格（只需将表格的 HTML 替换为您的请求之一；此时它将停止重复）。这是一个例子： init_checkout: function() { $( '#billing_country, #shipping_country, .country_to_state', '#MyCustomTableId' ).change(); $( document.body ).trigger( 'update_checkout' ); }, 强调列表中添加的“#MyCustomTableId”！对所有触发器执行此操作，它应该可以解决您的问题。每次更新 woocommerce 也会失败，所以想一下！（这不是世界末日，你会擅长的，但是你知道......可持续性是一个因素，谁知道我们中的一个人什么时候被公共汽车撞到......）我遇到了这个确切的问题，在按照操作挂钩后我找到了原因。在文件 wc-template-hooks.php 的第 223 和 224 行（在撰写本文时），您可以看到： add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 ); add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 ); 这就是事情重复的原因。 woocommerce_checkout_order_review 操作连续连接到两个单独的函数，我假设这些函数有一些代码来补偿用于防止重复的表标签，当使用 woocommerce_checkout_order_review 时，其他任何内容都会被重复。因此，为了解决这个问题，我所做的就是为 Woocommerce 已纳入 woocommerce_checkout_order_review 的两个函数创建自己的操作挂钩，并将它们添加为代码片段或添加到函数文件中，如下所示： /*** Create hook for the Woocommerce order summary table ***/ add_action( 'woocommerce_checkout_order_summary', 'woocommerce_order_review', 10 ); /*** Create hook for the Woocommerce order payment form ***/ add_action( 'woocommerce_checkout_order_payment', 'woocommerce_checkout_payment', 20 ); 使用这些，我可以完美地调用各个部分，并将它们包装在我自己的 HTML 中，以提供我想要的任何布局。我知道对于原来的问题来说已经太晚了，但我希望这对某人有帮助。

php html ajax

回答 3 投票 0

一旦我的 MSSQL 数据库发生更改，如何更新我的用户界面？

我正在使用 Quarkus、Hibernate、MSSQL 和 OptaPlanner 开发一个简单的仓库管理系统。当我点击“解决”按钮时，我希望将客户订单分配给库存位置。当我的

javascript json ajax hibernate optaplanner

回答 1 投票 0

如何修复数据不显示在页面但出现在网络预览中的问题

我尝试发布使用ajax转换为url的图像。问题是 $image = $_POST['imgData'];不显示任何内容，但如果我检查网络预览上的开发人员工具，则可以看到数据。 ...

php ajax chart.js

回答 1 投票 0

Django 根据浏览器的地理位置渲染视图

我试图根据浏览器给出的地理位置加载我的主页，如果坐标没问题，我加载这些坐标周围的机场列表，否则我加载所有机场。豪...

django ajax post view request

回答 1 投票 0

当我使用 jquery 加载 PartialView html 时，使用 0 值 id 参数调用我未调用的控制器

我有这个View Edit.cshtml @model 产品视图模型 @{ 布局=“_Layout”； } 我有这个View Edit.cshtml @model ProdutoViewModel @{ Layout = "_Layout"; } <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="position-static my-5"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a asp-action="Index" asp-controller="Home">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Editar</li> </ol> </nav> <form enctype="multipart/form-data" class="mt-5" id="form-produto" asp-action="Edit" method="post" asp-controller="Produto"> <input hidden value="@Model.Id" name="id"/> <div class="row flex-md-row flex-sm-column"> <div class="col-md-2"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Informações</button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Imagens</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Relacionados</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> </div> <div class="tab-content col-md-10" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <div class="container row"> @{ if (Model.Imagens.Where(img => img.Perfil).Count() > 0) { var perfil = Model.Imagens.Where(img => img.Perfil).First(); <div class="col-md-5 col-sm-12 img-container border border-2 rounded-4"> <div id="header-profile" class="row justify-content-end"> <a id="btn-profile" data-img-id="@perfil.Id" class="btn btn-close p-3"></a> </div> <img id="img-profile" class="p-3 card-img image" src="~/images/@(perfil.NomeArquivo+"."[email protected])" /> <div id="input-container" style="display:none"> <div class="input-group mb-3 mt-2"> <label class="btn btn-success custom-file-upload input-group-text w-100 justify-content-center d-flex" for="inputGroupFile01"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> </div> } else { <div class="col-md-5 col-sm-12 img-container"> <img id="img-profile" class="p-3 img-thumbnail image" src="~/images/img-icon.png" /> <div class=""> <div class="text">Hello World</div> </div> <div class="input-group mb-3"> <label class="input-group-text" for="inputGroupFile01">Upload</label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> } } <div class="col justify-content-between pt-4"> <lable asp-for="Nome">Nome</lable> <input class="form-control" type="text" asp-for="Nome" /> <lable asp-for="Descricao">Descrição</lable> <textarea class="form-control h-auto" asp-for="Descricao"></textarea> <div class="col row d-flex"> <div class="col"> <lable asp-for="Preco">Preço</lable> <input class="form-control" type="text" asp-for="Preco" /> </div> <div class="col"> <lable>Categoria</lable> <select asp-for=IdCategoria class="form-select"> @foreach (var categoria in ViewBag.Categorias) { <option value="@categoria.Id"> @categoria.Nome </option> } </select> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <div class="mt-2 container row"> <div id="gallery-container" class="row row-cols-1 row-cols-md-5 g-4 mx-auto"> @{ int id = 1; if (Model.Imagens.Where(img => !img.Perfil).Count() == 0) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } foreach (var imagem in Model.Imagens.Where(img => !img.Perfil)) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> <a id="btn-@id" data-img-id="@imagem.Id" class="btn btn-close p-3"></a> </div> <div class=""> <img id="img-@id" src="~/images/@(imagem.NomeArquivo + "." + imagem.Extensao)" class="img-gallery card-img mb-2" alt="..."> </div> </div> ++id; if (id == Model.Imagens.Where(img => !img.Perfil).Count() + 1) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } } } </div> </div> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <input class="form-control" id="input-text-produto"/> <div id="card-produto-container"> </div> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div> <button type="submit" class="btn btn-success float" id="save-button"> <i class="bi bi-floppy"></i></button> <div class="fixed-bottom row d-flex justify-content-end"> </div> </form> @section Scripts { <script> $(document).ready(function () { $('#inputGroupFile01').change(function () { var input = this; //console.log(input) if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-profile').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }); let idStart = @Model.Imagens.Count() == 0 ? 1 : @Model.Imagens.Count() let args = { input: 'input-'+idStart, img: 'img-'+idStart, card: 'card-'+idStart, header: 'header-'+idStart, label: 'label-'+idStart, line: 'line-'+idStart } function initGallery(args) { setEvents(args) } function setCloseEvents(idLimit) { for (let i = 1; i <= idLimit; ++i) { let btn = $('#btn-' + i) btn.click(function () { let card = $('#card-'+i) console.log(i) imgId = btn.data('img-id') $('#gallery-container').append(`<input hidden name="imgsDeletadas" value="${imgId}"/>`) card.remove() }) } } function setCloseEventProfile() { let btn = $('#btn-profile').click(function () { let img = $('#img-profile').attr('src', '/images/img-icon.png') let imgId = btn.data('img-id') var headerProfile = $('#header-profile') let inputContainer = $('#input-container') inputContainer.show() headerProfile.hide() $('#gallery-container').append(`<input hidden name ="imgsDeletadas" value ="${imgId}" />`) }) } $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) }) let limit = idStart - 1 setCloseEvents(limit) setCloseEventProfile() initGallery(args) }) </script> } 我的问题是：当我调用以下ajax请求并将结果加载到div中时（如果我只在控制台中打印内容，则不会发生任何错误），我的控制器中的方法Edit被调用，ID为0，该方法不存在，并返回错误，因为控制器在 db 中找不到 0 id。 $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) 这是我的部分视图： @model CardResponse<ProdutoViewModel> <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> @foreach(var produto in Model.Result) { <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">@produto.Nome</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> } </div> </div> 这是我的控制器： using Microsoft.AspNetCore.Mvc; using kssgrafica.Data; using kssgrafica.Models; using kssgrafica.Models.ViewModels; using ImageMagick; using kssgrafica.Services; using kssgrafica.Services.ImageHandler; using kssgrafica.Services.ImageHandler.Dtos; using Microsoft.EntityFrameworkCore; using AutoMapper; using kssgrafica.Models.AuxiliaryModels; using kssgrafica.Extensions; namespace kssgrafica.Controllers { public class ProdutoController(ApplicationDbContext context, IImageHandler _imageHandler, IMapper mapper) : Controller { private readonly ApplicationDbContext _context = context; private readonly IMapper _mapper = mapper; private string DefaultPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images"); public IActionResult Index() { var produtos = _context.Produtos.Include(p => p.Categoria).Include(p => p.Imagens).ToList(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); return View(produtosViewModel); } public async Task<IActionResult> LoadTable(DtParameters dtParameters) { var searchBy = dtParameters.Search?.Value; // if we have an empty search then just order the results by Id ascending var orderCriteria = "Id"; var orderAscendingDirection = true; if (dtParameters.Order != null) { // in this example we just default sort on the 1st column orderCriteria = dtParameters.Columns[dtParameters.Order[0].Column].Data; orderAscendingDirection = dtParameters.Order[0].Dir.ToString().ToLower() == "asc"; } var produtos = await _context.Produtos.ToListAsync(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); var result = produtosViewModel.AsQueryable(); if (!string.IsNullOrEmpty(searchBy)) { result = result.Where(r => r.Nome != null && r.Nome.ToUpper().Contains(searchBy.ToUpper()) || r.Descricao != null && r.Descricao.ToUpper().Contains(searchBy.ToUpper()) || r.Preco != null && r.Preco.ToString().ToUpper().Contains(searchBy.ToUpper()) || r.Id != null && r.Id.ToString() == searchBy.ToUpper()); } result = orderAscendingDirection ? result.OrderByDynamic(orderCriteria, DtOrderDir.Asc) : result.OrderByDynamic(orderCriteria, DtOrderDir.Desc); // now just get the count of items (without the skip and take) - eg how many could be returned with filtering var filteredResultsCount = result.Count(); var totalResultsCount = await _context.Produtos.CountAsync(); return Json(new DtResult<ProdutoViewModel> { Draw = dtParameters.Draw, RecordsTotal = totalResultsCount, RecordsFiltered = filteredResultsCount, Data = result .Skip(dtParameters.Start) .Take(dtParameters.Length) .ToList() }); } public IActionResult Create() { ViewBag.Categorias = _context.CategoriasProduto.ToList(); return View(); } [HttpPost] public async Task<IActionResult> Create(ProdutoViewModel produtoViewModel, List<IFormFile> imagens, IFormFile imagemPerfil) { produtoViewModel.DataCadastro = DateTime.UtcNow; var produto = _mapper.Map<Produto>(produtoViewModel); _context.Add(produto); await _context.SaveChangesAsync(); await SalvarImagens(imagens, imagemPerfil, produto); return RedirectToAction(nameof(Index)); } [HttpGet] public async Task<IActionResult> Edit(int id) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } [HttpPost] public async Task<IActionResult> Edit(ProdutoViewModel produtoViewModel, int[] imgsDeletadas, List<IFormFile> imagens, IFormFile imagemPerfil) { var produto = _mapper.Map<Produto>(produtoViewModel); _context.Update(produto); await DeleteImages(imgsDeletadas); await SalvarImagens(imagens, imagemPerfil, produto); await _context.SaveChangesAsync(); return RedirectToAction(nameof(Index)); } [HttpPost] public async Task<IActionResult> LoadCards(CardParameters cardParameters) { var produtos = await _context.Produtos.Include(p => p.Imagens).ToListAsync(); var result = _mapper.Map<List<ProdutoViewModel>>(produtos); if (!string.IsNullOrEmpty(cardParameters.SearchValue)) { result = result.Where(p => p.Id.ToString().ToUpper() == cardParameters.SearchValue.ToUpper() || p.Nome != null && p.Nome.ToUpper().Contains(cardParameters.SearchValue.ToUpper()) || p.Descricao != null && p.Descricao.ToUpper().Contains(cardParameters.SearchValue.ToUpper())).ToList(); } var response = new CardResponse<ProdutoViewModel>() { Result = result.Take(cardParameters.ResultsQtd).ToList(), LengthTotalRegisters = await _context.Produtos.CountAsync(), LengthFiltredResults = result.Count() }; return PartialView("Cards",response); } private async Task SalvarImagens(List<IFormFile> imagensGaleriaArquivo, IFormFile imagemPerfilArquivo, Produto produto) { foreach(var arquivo in imagensGaleriaArquivo) { var imagemGaleria = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = arquivo, Extensao = _imageHandler.GetExtension(arquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = false }; var dtoGaleria = imagemGaleria.ToImageDto(); if(await _imageHandler.SaveImageAsync(dtoGaleria)) { try { _context.Add(imagemGaleria); } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoGaleria); } } } if(imagemPerfilArquivo != null) { var imagemPerfil = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = imagemPerfilArquivo, Extensao = _imageHandler.GetExtension(imagemPerfilArquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = true }; var dtoPerfil = imagemPerfil.ToImageDto(); try { if(await _imageHandler.SaveImageAsync(dtoPerfil)) { _context.Add(imagemPerfil); } } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoPerfil); } } await _context.SaveChangesAsync(); } private async Task DeleteImages(int[] imagesIds) { if(imagesIds.Length > 0) { var imagesIdsList = imagesIds.ToList(); var images = await _context.Imagens.Where(img => imagesIdsList.Contains(img.Id)).ToListAsync(); foreach(var img in images) { img.Path = DefaultPath; _imageHandler.DeleteImage(img.ToImageDto()); _context.Remove(img); } await _context.SaveChangesAsync(); } } } } 问题涉及到的方法有Edit、post and get、LoadCards。我不知道为什么在加载 PartialView 时调用 Edit（get 方法），但我放置了一个 if 来处理 id 为 0 时的情况，返回 Ok()，但我想知道为什么会发生这种情况. 这是我的尝试： public async Task<IActionResult> Edit(int id) { if(id == 0) { return Ok(); } ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } 由于未指定任何值，因此参数 id 将获取默认值为零的整数。尝试使用可空整数int?。我还没有测试过它，但我相信你的 lambda 中还需要 id.Value，因为我假设 p.Id 是 int。 public async Task<IActionResult> Edit(int? id) { if(id.HasValue) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id.Value).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } else { return Ok(); } }

c# jquery ajax asp.net-core partial-views

回答 1 投票 0

如何用@RestController替换@Controller？

这是我的 TeacherController ： @控制器 @RequestMapping("/teacherController") 公共课 TeacherController { 私有静态最终字符串TEACHER_MODEL =“老师”; @Autowired

java ajax spring spring-restcontroller

回答 2 投票 0

如何使用ajax避免Vue 3组合API中的重定向

我正在尝试将提交表单中的数据发送到我的电子邮件并添加到谷歌表格中。我从这个链接 github 链接中找到了一种方法。它实际上达到了两个目的......

javascript ajax vuejs3

回答 1 投票 0

更改 WooCommerce 结帐运输选项的位置，允许 ajax 更新

我最近在 WooCommerce 设置中将部分结帐表单 (wc_cart_totals_shipping_html()) 从 review-order.php 移动到 form-billing.php。以前，我使用的是 jQuery('body').trigger('