'An extremely simple AJAX "HTTP GET" request using jQuery 's $.ajax() method does not Work for me. Backend is a ASP.net WEB API controller

Im trying to learn basics of WEB API, Im very beginner. I connected a HTML webpage to a get method in a WEB API controller in c#, using AJAX request with XMLHttpRequest object successfully. But Im trying to figure out how to write it with jQuery $.ajax method and I just cant figure it out.

The project is solely for me figuring out how to write these requests just for fun :D, thats why it is written as trivially as possible.

What I see when I launch the HTML site is only number 7 - response from xmlhttprequest object, so the connection to the controller must work.

This is the HTML website code:

<html>
<head>
   <script type="text/javascript" src="jquery-3.5.1.min.js">
       </script>
   <meta charset="utf-8" />
   <title></title>
</head>
<body>
   <script>
       let xml = new XMLHttpRequest();
       xml.onload = () => {
           let d = JSON.parse(xml.response);
           document.write(d.Id);
       }

       xml.open("GET", "https://localhost:44335/api/employees");
       xml.send();

       $.ajax({
           type: "GET",
       dataType: "json",
           url: "https://localhost:44335/api/employees2",
           success: function (data) {
               document.write("gh");
           },
           error: function (data) {
               alert("chyba");
           }
       });
   </script>
</body>
</html>

This is the backend C# WEB API Controller code

namespace WebApplication8.Controllers
{
    class employee
    {
        public string Id { get; set; }
    }

    public class EmployeesController : ApiController
    {
        [Route("api/employees")]
        [HttpGet]
        public HttpResponseMessage Geti()
        {
            employee e = new employee();
            e.Id = "7";
            return Request.CreateResponse(HttpStatusCode.OK,e);
        }

        [Route("api/employees2")]
        [HttpGet]
        public HttpResponseMessage a()
        {
            employee v = new employee();
            v.Id = "8";
            return Request.CreateResponse(HttpStatusCode.OK, v);
        }
    }
}
javascriptc++sharpjqueryajaxasp.net-web-api


Solution 1:[1]

you have to fix ajax on success

 $.ajax({
           type: "GET",
           dataType: "json",
           url: "https://localhost:44335/api/employees2",
           success: function (data) {
              document.write(data.Id);
           },
           error: function (xhr) {
               alert(xhr.message);
           }
       });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Serge

Related Questions