Angular/C# 如何捕获服务端返回的响应并显示在网页上

场景1：网页本身作为请求客户端（最常见场景） #

如果请求直接从网页前端发起，直接在请求回调中操作DOM或者赋值给响应式变量即可渲染到页面，以下是不同实现方式的示例：

• 原生JS fetch 实现

// 提前在HTML中添加结果展示容器：<div id="resultContainer"></div>
fetch('你的服务端接口地址', {
  method: 'POST', // 可根据实际请求类型调整为GET/其他方法
  body: JSON.stringify(请求参数)
})
.then(res => res.text()) // 服务端返回纯文本，用text()解析响应体
.then(resData => {
  // 捕获返回值后插入页面元素
  document.getElementById('resultContainer').textContent = resData;
  // 可额外添加成功状态样式
  if(resData === 'Received') {
    document.getElementById('resultContainer').classList.add('success-notice');
  }
})
.catch(err => console.error('请求异常：', err));

• 原生XMLHttpRequest实现（兼容低版本浏览器）

const xhr = new XMLHttpRequest();
xhr.open('POST', '你的服务端接口地址');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    document.getElementById('resultContainer').textContent = xhr.responseText;
  }
};
xhr.send(JSON.stringify(请求参数));

• 前端框架实现（Vue/React等）
  不需要手动操作DOM，直接将返回值赋值给响应式变量即可：
  • Vue3 示例

  const resultText = ref('');
  // 请求回调中赋值
  resultText.value = resData;
  

  模板直接绑定变量即可：<div>{{ resultText }}</div>
  • React 示例

  const [resultText, setResultText] = useState('');
  // 请求回调中赋值
  setResultText(resData);
  

注意：如果请求时出现跨域报错，需要在服务端配置CORS规则，允许网页所在域名访问接口。

场景2：请求由非网页客户端发起，需要同步到网页展示 #

如果请求由桌面端、移动端等独立客户端发起，结果仅输出在客户端控制台，可通过以下方案同步到网页：

• 方案1：客户端拿到Received返回值后，将结果同步上报给服务端，网页端通过轮询接口或者WebSocket监听结果更新
• 方案2：服务端返回Received给客户端的同时，通过WebSocket主动推送给已建立连接的网页端，网页端收到消息后直接渲染

// 网页端WebSocket监听示例
const ws = new WebSocket('ws://你的服务端WebSocket服务地址');
ws.onmessage = (event) => {
  if(event.data === 'Received') {
    document.getElementById('resultContainer').textContent = event.data;
  }
};

内容的提问来源于stack exchange，提问作者Keith Nolan