如何使用 AJAX 从 HTML 页面调用 API ASP.net答案

【问题标题】：How to call an API ASP.net with AJAX from a HTML page如何使用 AJAX 从 HTML 页面调用 API ASP.net
【发布时间】：2020-04-22 03:02:35
【问题描述】：

我开始使用 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>

我不明白我做错了什么，感谢您的建议。

【问题讨论】：

it doesn't work 是什么意思？你有什么错误吗？你能调试 asp.net API 代码吗？
尝试将API的完整url分配给var uri
“它不起作用”我的意思是我的“获取所有”请求没有得到产品，在我的 HTML 页面中我看不到任何产品，我只看到标题“所有产品”来自 HTML 页面。

标签： c# jquery html ajax api

【解决方案1】：

您的 API 控制器端点不是预期的 REST 格式。如果我的猜测是正确的，您将无法通过浏览器访问 api/products 端点。除非您有自定义路由配置，否则 api/products 将不起作用。尝试将控制器操作更改为 Get、Get(int id)..etc。

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);
        }
    }
}

【讨论】：

【解决方案2】：

您的 URI 变量定义为“api/products”，但您没有产品的默认 GET。要通过 ajax 调用您的 api，您的 URI 必须具有您要调用的方法名称，除非您使用的是 RESTfull API，而您不是。正确的 URI 应该是“api/products/GetAllProducts”。您还可以在控制器和方法上使用 [Route] 属性，为您的 API 定义自定义路由

【讨论】：