获取 API 响应时在 javascript 文件中获取空白响应答案

【问题标题】：Getting blank response in the javascript file while fetching the API response获取 API 响应时在 javascript 文件中获取空白响应
【发布时间】：2021-03-23 12:55:37
【问题描述】：

我有一个按钮。当我单击该按钮时，将执行 js 文件中的登录方法。在 Login 方法中，我正在调用一个 API。我正在尝试获取 API 返回的输出，但在以下代码的警报消息中得到空白响应。尝试通过 Postman 访问 API 时，我得到了正确的响应。这是我调用 API 的 js 代码-

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

这里是获取 API 代码-

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

【问题讨论】：

您是否尝试过使用浏览器的开发者工具（网络和控制台工具）来检查正在发生的事情？
是的，我在js文件里放了一个调试器。一切正常，但是这个 - “xhr.responseText”变成空白控制台中没有错误，当我点击按钮时网络正在显示 API 调用
如果您检查网络调用并查看选项卡中的原始响应，是否显示正确的结果？
好的。那不是我让你检查的。
响应的状态码是什么？听起来您可能有网络或连接错误

标签： javascript c# asp.net api

【解决方案1】：

这对我有用 -

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

【讨论】：

【解决方案2】：

如果您感到困惑，您可以在 Postman 中为 JavaScript XHR 创建代码，请按照以下步骤操作：

我认为下面的代码有效：


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

【讨论】：

我使用了您提到的相同代码如果我将 readyState 保持为 1，那么它会进入 if 语句并给出空白输出。所以基本上，问题是我将 readyState 设置为 1 而不是 4
readyState 1 表示您的请求已打开，您应该等到 readyState 4 因为这表示请求已完成，请查看此链接以了解我在说什么：developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…