时间戳

首页 > 解决方案 > 使用 AJAX 从另一个网站获取数据

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

问题描述

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

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

我已经使用 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');
      }
    });
  }
});

但我得到这个错误

跨域读取阻止 (CORB) 阻止了 MIME 类型 text/html的跨域响应http://www.sencare.com.bd/service_data_curl?callback=jQuery1113005791399070777792_1542690562198&clinic_id=2&_=1542690562199 。有关详细信息，请参阅https://www.chromestatus.com/feature/5629709824032768

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

标签： javascriptphpjqueryajaxcurl

解决方案

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

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

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

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

推荐阅读