如何在PHP表格中展示Razorpay IFSC API返回的数据

问题根源分析 #

你的代码主要存在后端输出格式错误、前端数据解析及DOM操作逻辑错误两方面问题，以下是具体修复方案：

修复后端代码（getdata.php） #

原代码使用return无法向前端输出数据，且未统一响应格式，导致前端无法正确解析：

<?php
header('Content-Type: application/json'); // 强制返回JSON格式响应
if(isset($_POST['ifsc1'])){
    $ifsc = trim($_POST['ifsc']);
    $apiUrl = 'https://ifsc.razorpay.com/'.$ifsc;
    $apiResponse = @file_get_contents($apiUrl);
    
    // 处理API请求失败的情况
    if($apiResponse === false){
        echo json_encode(['error' => '无法连接到查询服务，请稍后重试']);
        exit;
    }
    
    $jsonData = json_decode($apiResponse, true);
    
    if(isset($jsonData['ADDRESS'])){
        echo json_encode($jsonData); // 输出解析后的有效数据
    } else {
        echo json_encode(['error' => '无效的IFSC码，请检查输入']);
    }    
}
?>

修复前端代码（php_ifsc.php） #

原代码存在表格标签错误、AJAX未指定数据类型、遍历逻辑错误等问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFSC 查询工具</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <style>
        .table { border-collapse: collapse; margin: 20px 0; width: 80%; }
        .table td { border: 1px solid #ddd; padding: 8px; }
        .table tr:nth-child(even) { background-color: #f2f2f2; }
        input { margin: 0 10px; padding: 4px; }
    </style>
</head>
<body>
    <form method="post">
        <label>
            IFSC码:
            <input type="text" name="ifsc" id="ifsc" placeholder="输入IFSC码" required>
        </label>
        <input type="button" value="查询" id="submit" name="submit">
    </form>

    <table class="table">
        <!-- 动态数据将插入此处 -->
    </table>

<script>
 $('#submit').click(function(){
      var ifsc = $('#ifsc').val().trim();
      if(!ifsc){
          alert('请输入有效的IFSC码');
          return;
      }

      // 查询前清空表格原有内容
      $('.table').empty();

       $.ajax({
        url: "getdata.php",
        type: "POST",
        dataType: "json", // 指定响应为JSON类型，避免手动解析
        data: {
            'ifsc1': true,
            'ifsc': ifsc
        },
        success:function(response){
            // 处理错误提示
            if(response.error){
                $('.table').append(`<tr><td colspan="2">${response.error}</td></tr>`);
                return;
            }

            // 遍历API返回的键值对生成表格行
            $.each(response, function(key, value){
                var rowHtml = `<tr>
                    <td>${key}</td>
                    <td>${value}</td>
                </tr>`;
                $('.table').append(rowHtml);  
            });
        },
        error:function(){
            $('.table').append('<tr><td colspan="2">请求失败，请检查网络连接</td></tr>');
        }
      });
    })
</script>
</body>
</html>

核心修复点 #

1. 后端：添加JSON响应头，用echo替代return输出数据，统一成功/错误的JSON响应格式，增加API请求失败处理
2. 前端：修复表格标签错误，指定AJAX数据类型为JSON，修正$.each遍历参数顺序，添加查询前表格清空逻辑，增加输入校验和错误提示

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