javascript - 使用 AJAX 从另一个网站获取数据

Question

我有一个表格，其中包含两个下拉菜单“诊所”和“服务”。现在“服务”下拉列表将根据“诊所”下拉列表的变化进行更新。

现在“服务”和“诊所”的数据存储在另一个网站数据库中。

我已经使用 cURL 获取了“诊所”数据。但由于我必须在运行时更新“服务”下拉菜单，这就是我尝试使用 AJAX 获取“服务”数据的原因。

HTML

<form method="post">
  <div class="chosen-select-single mg-b-20">
    <label><b>Select Clinic : </b></label>
    <select data-placeholder="Choose a Clinic..." class="chosen-select" tabindex="-1" name="clinic" id="clinic_id">
      <option value="">Select One</option>
      <?php foreach($clinic_datum as $data) { ?>
        <option value="<?php echo $data->id;?>"><?php echo $data->name?></option>
      <?php } ?>
    </select>
    <?php if($clinicErr != "") { ?>
      <span class="error">* <?php echo $clinicErr;?></span>
    <?php } ?>
  </div>
</form>

AJAX

jQuery("#clinic_id").change(function() {
  var clinic_id = $('#clinic_id').val();
  if(clinic_id.trim() != '') {
    jQuery.ajax({
      url: "http://www.sencare.com.bd/service_data_curl",
      type: 'GET',
      dataType: 'jsonp',
      data: {clinic_id : clinic_id},
      success: function(msg) {
        console.log('msg');
      }
    });
  }
});

但是我得到这个错误

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://www.sencare.com.bd/service_data_curl?callback=jQuery1113005791399070777792_1542690562198&clinic_id=2&_=1542690562199 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details

如何解决这个问题...有人帮忙吗？

Answer 1

当您从第三方 API 动态加载数据时，您应该将 ajax 请求的目标 url 更改为您自己域上的脚本，并像最初一样通过 curl 获取数据。然后归还，照常处理。您可能为此不需要 jsonp - 只需常规 json 就可以正常工作。

理论上，如果您有权将 CORS header 添加到 sencare.com，您可以通过在 Apache 配置文件中执行类似以下操作来允许 ajax 请求:

Access-Control-Allow-Origin: https://{your-website-url}

不过，在大多数情况下，您会希望使用自己的脚本简单地处理服务器端的事情，因为这提供了更高的稳定性、灵 active ，甚至是验证和清理 API 输出的任何内容的便捷方式。