JQuery.ajax not working with HTTPS full url





Jquery autocomplete is working well with relative url like this 

jQuery.ajax({
                   url:      "admin/auto-complete-search-cty.php",

But not working with absolute url like this

source: function(request, response) {
//alert(request.term);
                jQuery.ajax({
                   url:      "https://www.website.com/admin/auto-complete-search-cty.php",


why i need to work with absolute url?

I need to work the url with HTTPS as absolute / full url. Because I have website page with url rewrite, and it does not work with relative url and when i used the absolute url, it is also not working. Because to work ajax jquery url with https full path, we need to add the content type to encode the url.


Important : For absolute url the url will be same as the website url you are currently using. As for exampe if your website url is https://website.com then your absolute url must be the same and not like this, https://www.website.com. In my issue, I am using www in ajax url. and my autocomplete is not working. After remove www it is working fine.


"If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

When you are using Postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:"

For this i have added the content-type within ajax section. Here is the full code.

$(function()
    {
        //this._trigger("selected", event, { item: this.active });
        $("#city_name").autocomplete({
            minLength: 0,
            delay : 100,        

            source: function(request, response) {
//alert(request.term);
                jQuery.ajax({
                   url:      "https://www.website.com/admin/auto-complete-search-cty.php",
                   headers: {
       
        'Content-Type':'application/x-www-form-urlencoded'
    },
                   data:    {
                                countryname : request.term, st: $("#state_id").val()
                            },
                   dataType: "json",
                   success: function(data)
                   {
                        response(data);
                        //alert(data);
                    }  
                })
            },

           
            select:  function(e, ui)
            {
                var cityId = ui.item.id;
                //alert(cityId);
                $("#city").val(cityId);  


            }
        }).focus(function () {
    $(this).autocomplete("search");
});


Reference



const url_test = `https://foo.bar.faz/api/api_call/${api_parameter}/${api_parameter2}/${params}`;

xhttp.open("GET", url_test, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

console_log(url_test); // https://foo.bar.faz/api/api_call/1/2/?get=param&get2=param2&
xhttp.send(); // http://foo.bar.faz/api/api_call/1/2?get=param&get2=param2& <-- request sent to this URL, causing a mixed content error

===================


This code below works for me. I always use only single quotes, and it works fine. I suggest you should use only single quotes or only double quotes, but not mixed up.

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });

Links













Comments

Post a Comment