如何使用“Fetch API”在 javascript 和 c# 之间传递数据？

Question

我知道如何通过ajax在javascript和c#之间传递数据，现在我想知道fetch。

c#:

namespace WebApplication1
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    //[System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
    }
}

javascript：

fetch('http://localhost:62177/WebService1.asmx/HelloWorld')
    .then(response => {
        alert(response.json());
    })
    .then(response => {
        alert(response);
    })

它显示：

这个url的使用是基于ajax的。

我把网址改成“http://localhost:62177/WebService1.asmx?op=HelloWorld”，它显示：

我以为是响应成功，但是我什么也没收到，它显示：

然后我修改了返回数据的方法，现在是json-format：

c#:

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

public void HelloWorld()
{
    object JSONObj = JsonConvert.SerializeObject("Hello World");
    Context.Response.Write(JSONObj);
}

但没有任何变化。

我不知道如何改变它。有人可以帮我一点忙吗？

Answer 1

您的 Web 服务的输出不会生成 JSON。它应该输出 "Hello World" 时应该说如下内容：

{"YourKeyHere":"Hello World"}

我会将网络服务代码更改为如下内容：

    [WebMethod]
    [System.Web.Script.Services.ScriptMethod(UseHttpGet = true, ResponseFormat System.Web.Script.Services.ResponseFormat.Json)]
    public void HelloWorld()
    {
        var obj = new { YourKeyHere = "Hello World" };
        string JSONObj = JsonConvert.SerializeObject(obj);
        Context.Response.Write(JSONObj);
    }

在您的 Web 服务顶部，取消注释此装饰：[System.Web.Script.Services.ScriptService]。它需要取消注释，以便 JavaScript（可能还有其他客户端）可以看到您的服务。

在您的 JavaScript 中，您的响应将以文本（而不是 json）形式返回，并且会附带一个 {"d":null} 括号。为了清理它，我使用了子字符串并将它们放在不同的函数中：

    function SayHello()
    {
    //...
    var options = {
            method: 'GET' ,                              
            headers: {
                'Content-Type': 'application/json',
            }
        };
        fetch("http://localhost:62177/WebService1.asmx/HelloWorld", options)
            // Handle success
            .then(response => response.text())               
            .then(result => DisplayResponse(result))
            .catch(err => console.log('Request Failed', err));
    //...
    }

    function DisplayResponse(result) {                   
        console.log(result); //not sure why 'd:null' shows in output
        console.log(result.substring(0, result.indexOf('{"d":null}'))); //get rid of 'd:null'
        console.log(JSON.parse(result.substring(0, result.indexOf('{"d":null}')))); //get rid of 'd:null' then parse

    }

Answer 2

您首先需要确保您的服务器返回的是 JSON 格式的内容。但是另外，在你的 JS 中，你必须 return response.json()（或 response.text() or whatever method is appropriate) infetch` 以便处理流，以便在下一个函数中得到响应：

fetch('http://localhost:62177/WebService1.asmx/HelloWorld')
  .then(response => {
    return response.json();
  })
  .then(responseJSON => {
    alert(responseJSON);
  })

初始响应是一个响应流对象，实际上还没有包含任何数据。