Fetching data from another website using AJAX

Question

I have a form with two dropdown 'clinic' and 'services'. Now 'service' dropdown will update according to the change of 'clinic' dropdown.

Now the data of 'service' and 'clinic' are stored in another website database.

I have already fetched 'clinic' data using cURL. But since I have to update 'service' dropdown on runtime that's why I am trying to fetch 'service' data using 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');
      }
    });
  }
});

But I get this error

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

How to solve this ... Anybody help please ?

@Shivam.... not solved... add 'header('Access-Control-Allow-Origin: *');' at top of the file — raff
– raff, Commented Nov 20, 2018 at 5:47

You Old Fool · Accepted Answer · 2018-11-20 20:50:11Z

3

When you are loading data dynamically from a third-party API you should change the target url of the ajax request to a script on your own domain and fetch the data via curl as you did initially. Then return it and handle things as normal. You probably don't need jsonp for this - just regular json should work fine.

In theory, if it's within your authority to add CORS headers to sencare.com, you could allow the ajax request by doing something like this in an Apache config file:

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

In most cases, though, you'll want to simply handle things server side with your own script as this offers more stability, flexibility and even a convenient way to validate and sanitize whatever the API spits out.

edited Nov 20, 2018 at 20:50

answered Nov 20, 2018 at 5:42

You Old Fool

23.2k13 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason · Accepted Answer · 2018-11-20 19:42:47Z

0

I just answered a similar question here. It assumes you're using the Apache Web server. Using Fetch in react, need username password to access database

Basically, your question indicates your server needs to be configured to handle Cross Origin Resource Sharing (CORS).

If your Web server is Apache, you can achieve this by adding the following the line to your server/virtual host configuration file, or to an .htaccess file in the root directory of your website/Web app.

Header set Access-Control-Allow-Origin "*"

You may need to restart the server for the changes to take effect. On Linux machines, that's usually achieved with the following command.

sudo service apache2 restart

or

sudo service httpd restart

edited Nov 20, 2018 at 19:42

answered Nov 20, 2018 at 5:32

Jason

2,8801 gold badge18 silver badges30 bronze badges

1 Comment

Jason Over a year ago

@charlietfl it's true that if raff does not have access to the server he will not be able to configure it to allow cross origin requests. I'm not sure that the case though.

Collectives™ on Stack Overflow

Fetching data from another website using AJAX

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related