如何從 HTML 頁面使用 AJAX 調用 API ASP.net

Question

我正在開始使用 ASP.net API，我正在嘗試從我的 HTML 頁面使用 AJAX 調用我的 API。 我只想顯示產品列表並按 Id 搜索，但我的 get 請求似乎不起作用，並且按 Id 請求搜索也是如此。

這是我的控制器。

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[]
        {
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

我的 HTML 頁面

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Product App</title> </head> <body> <div> <h2>All Products</h2> <ul id="products" /> </div> <div> <h2>Search by ID</h2> <input type="text" id="prodId" size="5" /> <input type="button" value="Search" onclick="find();" /> <p id="product" /> </div> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script> <script> var uri = 'api/products'; $(document).ready(function () { // Send an AJAX request $.getJSON(uri) .done(function (data) { // On success, 'data' contains a list of products. $.each(data, function (key, item) { // Add a list item for the product. $('<li>', { text: formatItem(item) }).appendTo($('#products')); }); }); }); function formatItem(item) { return item.Name + ': $' + item.Price; } function find() { var id = $('#prodId').val(); $.getJSON(uri + '/' + id) .done(function (data) { $('#product').text(formatItem(data)); }) .fail(function (jqXHR, textStatus, err) { $('#product').text('Error: ' + err); }); } </script> </body> </html>

我不明白我做錯了什么，謝謝你的建議。

Answer 1

您的 URI 變量定義為“api/products”，但您沒有產品的默認 GET。 要通過 ajax 調用您的 api，您的 URI 必須具有您要調用的方法名稱，除非您使用的是 RESTfull API，而您不是。 正確的 URI 應該是“api/products/GetAllProducts”。 您還可以在控制器和方法上使用 [Route] 屬性，為您的 API 定義自定義路由

Answer 2

您的 API 控制器端點不是預期的 REST 格式。 如果我的猜測是正確的，即使通過瀏覽器，您也將無法訪問 api/products 端點。 除非您有自定義路由配置，否則 api/products 將無法工作。 嘗試將您的控制器操作更改為 Get、Get(int id)..等。

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[]
        {
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
        };

        public IEnumerable<Product> Get()
        {
            return products;
        }

        public IHttpActionResult Get(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

如何從 HTML 頁面使用 AJAX 調用 API ASP.net

問題描述

2 個解決方案

解決方案1
0 2020-01-03 14:46:07

解決方案2
0 2020-01-03 14:48:46

如何從 HTML 頁面使用 AJAX 調用 API ASP.net

問題描述

2 個解決方案

解決方案1 0 2020-01-03 14:46:07

解決方案2 0 2020-01-03 14:48:46

解決方案1
0 2020-01-03 14:46:07

解決方案2
0 2020-01-03 14:48:46