如何通过JS调用Data.php、Status.php接口实现zip邮编校验与结果处理

实现方案 #

1 先修正PHP接口的响应头问题 #

两个PHP文件当前设置的Content-Type响应头有误，你返回的是JSON/普通文本，不需要设置为表单类型，修改如下：
Data.php和Status.php都替换首行header配置：

// 替换掉原来的header('Content-Type: application/x-www-form-urlencoded');
header('Content-Type: application/json; charset=utf-8');

2 前端HTML结构示例 #

提前准备输入和结果填充的DOM节点：

<!-- 输入区 -->
<div>
  <label>邮编：</label>
  <input type="text" id="zipInput" placeholder="请输入5位数字邮编">
  <button id="submitBtn">查询</button>
</div>
<!-- 结果展示区 -->
<div>
  <p>所属州：<span id="stateResult">-</span></p>
  <p>所属城市：<span id="cityResult">-</span></p>
  <p>访问状态：<span id="statusResult">-</span></p>
  <p style="color:red" id="errorTip"></p>
</div>

3 业务逻辑JS代码 #

基于你已有的ajax封装，添加联动请求逻辑：

// 预获取DOM节点
const zipInput = document.getElementById('zipInput');
const submitBtn = document.getElementById('submitBtn');
const stateResult = document.getElementById('stateResult');
const cityResult = document.getElementById('cityResult');
const statusResult = document.getElementById('statusResult');
const errorTip = document.getElementById('errorTip');

// 绑定查询事件，如需实时校验可换成input事件加防抖
submitBtn.addEventListener('click', handleZipQuery);

function handleZipQuery() {
  // 清空历史结果和报错
  resetResult();
  const zip = zipInput.value.trim();
  // 前端先做基础格式校验，减少无效请求
  if (!/^\d{5}$/.test(zip)) {
    errorTip.textContent = '请输入5位数字格式的邮编';
    return;
  }

  // 第一步：请求Data.php校验邮编并获取基础地址信息
  ajax({
    url: 'Data.php',
    body: `zip=${encodeURIComponent(zip)}`,
    success: (res) => {
      if (res === 'error') {
        errorTip.textContent = '邮编校验失败，请输入有效邮编';
        return;
      }
      // 解析返回的JSON数据
      const zipInfo = JSON.parse(res);
      // 填充地址字段
      stateResult.textContent = zipInfo.state;
      cityResult.textContent = zipInfo.city;

      // 第二步：校验通过后请求Status.php获取访问状态
      ajax({
        url: 'Status.php',
        body: `zip=${encodeURIComponent(zip)}`,
        success: (statusRes) => {
          if (statusRes === 'error') {
            errorTip.textContent = '状态查询失败';
            return;
          }
          // 填充状态字段，按状态区分展示颜色
          statusResult.textContent = statusRes;
          statusResult.style.color = statusRes === 'allowed' ? 'green' : 'red';
        },
        error: () => {
          errorTip.textContent = '状态接口请求异常，请稍后重试';
        }
      })
    },
    error: () => {
      errorTip.textContent = '基础信息接口请求异常，请稍后重试';
    }
  })
}

// 重置结果工具方法
function resetResult() {
  errorTip.textContent = '';
  stateResult.textContent = '-';
  cityResult.textContent = '-';
  statusResult.textContent = '-';
}

4 注意事项 #

• POST请求的body参数需要用encodeURIComponent转义，避免特殊字符导致服务端解析参数异常
• 前端预校验格式可大幅降低服务端无效请求量
• 如需实时校验，可将点击事件替换为input事件加防抖，比如输入停止300ms后再发起请求

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