从HTML调用Webservice无法接收API响应，请求协助处理

步骤1：发起WebService请求 #

根据你的WebService类型（SOAP或REST），选择对应的请求方式，以下是两种常见场景的实现代码：

场景1：SOAP类型WebService

<!-- 页面中的下拉列表 -->
<select id="targetDropdown"></select>

<script>
// 获取下拉列表DOM元素
const dropdown = document.getElementById('targetDropdown');

// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求：替换为你的WebService接口地址
xhr.open('POST', 'https://your-webservice-url.com/service', true);

// 设置SOAP请求头
xhr.setRequestHeader('Content-Type', 'text/xml; charset=utf-8');

// 构造SOAP请求体（完全匹配你Postman中的请求内容，包括命名空间、方法名、参数）
const soapPayload = `<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <YourWebMethodName xmlns="your-namespace-url">
      <!-- 若有请求参数，在此添加 -->
      <Param1>value1</Param1>
    </YourWebMethodName>
  </soap:Body>
</soap:Envelope>`;

// 处理请求响应
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 解析XML格式的SOAP响应
    const xmlDoc = xhr.responseXML;
    // 替换为响应中实际的数据节点名称（参考你的HTML响应截图）
    const dataNodes = xmlDoc.getElementsByTagName('YourDataNode');

    // 清空下拉列表
    dropdown.innerHTML = '';
    // 添加默认选项
    const defaultOpt = document.createElement('option');
    defaultOpt.textContent = '请选择';
    defaultOpt.value = '';
    dropdown.appendChild(defaultOpt);

    // 遍历数据节点，生成下拉选项
    for (let i = 0; i < dataNodes.length; i++) {
      const itemText = dataNodes[i].textContent;
      // 若节点有value属性则使用，否则用文本作为value
      const itemValue = dataNodes[i].getAttribute('value') || itemText;

      const option = document.createElement('option');
      option.textContent = itemText;
      option.value = itemValue;
      dropdown.appendChild(option);
    }
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};

// 监听请求错误
xhr.onerror = () => console.error('请求发生网络错误');

// 发送请求
xhr.send(soapPayload);
</script>

场景2：REST类型WebService

如果你的WebService是REST风格（返回JSON），可以使用更简洁的Fetch API：

<select id="targetDropdown"></select>

<script>
const dropdown = document.getElementById('targetDropdown');

fetch('https://your-rest-api-url.com/list', {
  method: 'GET', // 或POST，根据接口要求
  headers: {
    'Content-Type': 'application/json',
    // 若需要认证，添加对应的请求头，如Authorization: 'Bearer token'
  },
  // POST请求时添加请求体：body: JSON.stringify({param1: 'value1'})
})
.then(res => res.json())
.then(data => {
  dropdown.innerHTML = '';
  // 添加默认选项
  const defaultOpt = document.createElement('option');
  defaultOpt.textContent = '请选择';
  defaultOpt.value = '';
  dropdown.appendChild(defaultOpt);

  // 假设返回的data是数组，格式如[{id: 1, name: '选项1'}, ...]
  data.forEach(item => {
    const option = document.createElement('option');
    option.textContent = item.name;
    option.value = item.id;
    dropdown.appendChild(option);
  });
})
.catch(err => console.error('请求错误:', err));
</script>

关键注意事项 #

• 替换代码中的接口地址、SOAP请求体、数据节点名称为你实际的WebService信息（完全匹配Postman和响应截图中的内容）
• 确保WebService支持跨域请求（若HTML页面和接口不同域），否则会出现CORS错误，需要后端配置跨域允许
• 调试时可以通过浏览器控制台查看请求状态和响应内容，排查问题

内容的提问来源于stack exchange，提问作者Ashid Das