Getting blank response in the javascript file while fetching the API response

Question

I have a button. When I click that button, Login method in the js file gets executed. Inside the Login method, I am calling an API. I am trying to fetch the output returned by the API but I am getting blank response in the alert message in the below code. I am getting the correct response when trying to hit the API through Postman. Here is the js code where I am calling the API-

function Login() {
    
    var url="https://localhost:44369/categories?username="+"sid"+"&password="+"123";
   

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
   
        alert(xhr.responseText);
    
  }
  xhr.open('GET', url, true);
  xhr.send(null);
}

Here is the get API code-

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

namespace login.Controllers
{
    public class ValuesController : ApiController
    {
        // GET api/values
        [HttpGet]
        [Route("categories")]
        public IHttpActionResult Get(string username,string password)
        {
            loginResponse response = new loginResponse();
            if(username=="sid" && password== "123"){

                response.Success = true;
            }
            else
            {
                response.Success = false;
            }
            return Ok(response);

        }

       
        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public void Post([FromBody] string value)
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }
}

Have you tried to use your browser's Developer Tools (network and console tools) to inspect what is happening? — ADyson
– ADyson, Commented Dec 12, 2020 at 8:07
Yes, I put a debugger in the js file. Everything is working fine, but this - "xhr.responseText" is coming blank No error in the console and the network is showing the API call when I click the button — Siddharth Kumar Shukla
– Siddharth Kumar Shukla, Commented Dec 12, 2020 at 8:15
If you examine the network call and look at the raw response in the tab, is the correct result showing there? — ADyson
– ADyson, Commented Dec 12, 2020 at 8:22
What is the status code of the response? It sounds like maybe you have a network or connection error — ADyson
– ADyson, Commented Dec 12, 2020 at 12:14

Siddharth Kumar Shukla · Accepted Answer · 2020-12-12 14:44:51Z

1

This worked for me -

var username=document.getElementById("UserName").value;
var password=document.getElementById("Password").value;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://localhost:44369/categories?username=sid&password=12', true);
xhr.send();
xhr.onreadystatechange = () => {
    console.log(xhr);
    if (xhr.readyState=== 4) {
        console.log(xhr.response);
    }
}

edited Dec 12, 2020 at 14:44

answered Dec 12, 2020 at 14:22

Siddharth Kumar Shukla

1371 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ridvanaltun · Accepted Answer · 2020-12-12 09:12:41Z

0

If you confused you can create code for JavaScript XHR in Postman, follow below steps:

I think below code works:


var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://localhost:44369/categories?username=sid&password=123");

xhr.send();

answered Dec 12, 2020 at 9:12

ridvanaltun

3,0902 gold badges21 silver badges32 bronze badges

2 Comments

Siddharth Kumar Shukla Over a year ago

I have used the same code that you have mentioned If I am keeping the readyState as 1, then its going inside the if statement and giving blank output. So basically, the problem is that instead of 4, I am getting readyState as 1

ridvanaltun Over a year ago

readyState 1 means your request opened, you should wait until readyState 4 because it means request done, check this link to understand what i talking about: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…

Collectives™ on Stack Overflow

Getting blank response in the javascript file while fetching the API response

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related