无法使用 JQuery Ajax Post 调用显示项目列表

Posted 2023-05-08

【中文标题】无法使用 JQuery Ajax Post 调用显示项目列表

【英文标题】：Cannot show the list of items using JQuery Ajax Post call

【发布时间】：2021-08-09 00:29:11

【问题描述】：

我的 ItemsController 中有以下代码：

public PartialViewResult GetAllItems()
        
            IEnumerable<ItemDetailsViewModel> listOfItemDetailsViewModels =
                    (from objItem in objVPPhamEntities.Items
                     select new ItemDetailsViewModel()
                     
                         ImagePath=objItem.ImagePath,
                         CategoryId = objItem.CategoryId,
                         ItemId = objItem.ItemId,
                         ItemName = objItem.ItemName,
                         ItemPrice=objItem.ItemPrice,
                         Description=objItem.Description
                     ).ToList();
            return PartialView("_ItemDetailsPartial.cshtml", listOfItemDetailsViewModels);
        

然后在我的 javascript in index 中：

$(document).ready(function () 
        LoadItemDetails();
);
function LoadItemDetails() 
            $.ajax(
                async: true,
                data: 'GET',
                dataType: 'html',
                contentType: false,
                processData: false,
                url: '@Url.Action("GetAllItems","Items")',
                success: function (data) 
                    $("#divLoadItemDetails").html(data);
                ,
                error: function () 
                    alert('Error.');
                
            );
        

这是我的 _ItemDetailsPartial

   @model IEnumerable<WebApplication3.ViewModel.ItemDetailsViewModel>

<table style="width:100%">
    <thead>
        <tr>
            <th>

            </th>
            <th>
                Ảnh
            </th>
            <th>
                Mã hàng
            </th>
            <th>
                Mã sản phẩm
            </th>
            <th>
                Tên sản phẩm
            </th>
            <th>
                Giá
            </th>
            <th>
                Chi tiết
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        
            <tr>
                <td>
                    <span id="btnDelete" class="glyphicon glyphicon-trash" onclick="DeleteItem(@item.ItemId)"></span> &nbsp;&nbsp;
                    <span id="btnEdit" class="glyphicon glyphicon-pencil" onclick="EditItem(@item.ItemId)"></span>
                </td>
                <td>
                    <img src="@Url.Content("~/ItemImage/"+ item.ImagePath)"   class="img-responsive"/>
                </td>
                <td>
                    @item.CategoryId
                </td>
                <td>
                    @item.ItemId
                </td>
                <td>
                    @item.ItemName
                </td>
                <td>
                    @item.ItemPrice
                </td>
                <td>
                    @item.Description
                </td>
            </tr>
        
    </tbody>
</table>

最后是我的 html in index:

 <div id="divLoadItemDetails"></div>

我想显示来自 sql server 的项目列表 添加项目功能运行良好，但我无法显示项目列表。当我运行它而不是显示项目列表时，它总是说错误。谁能帮帮我？？？

【问题讨论】：

错误是什么？

不知道，只是在error:function中显示错误框

每个浏览器都有一个开发者工具。在浏览器中打开开发者工具，检查错误

【参考方案1】：

你必须修复 ajax。试试这个

function LoadItemDetails() 
            $.ajax(
                type: 'GET',
                url: '/items/GetAllItems',
                success: function (data) 
                    $("#divLoadItemDetails").html(data);
                ,
                error: function (xhr) 
                    alert(xhr.responseText);
                
            );
        

顺便说一下，您使用的是 Get 调用，而不是 POST，因为它写在您的问题标题中。试试这个动作标题

[Route("~/Items/GetAllItems")]
public IActionResult GetAllItems()

.....your code here

【讨论】：

感谢您的帮助，但仍然无法正常工作