Json request working on safari but not chrome/firefox

Question

http://www.imobilus.co.uk/json%20request/index.html - live version

https://jsfiddle.net/5p6h3rtt/

Cannot work this out at all, fairly new to jquery

Works perfect on safari but is blank on chrome and firefox

$( document ) .ready(function() {

$.ajax({ 
    type: 'GET',
    url: 'http://www.reed.co.uk/api/1.0/search?keywords=imobilus%20jobs', 
    beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(' b110030d-7491-48fe-9354-05c0ec0181d7' + ":" + '' ));
},
    data: { username: 'b110030d-7491-48fe-9354-05c0ec0181d7', password:'' },
    dataType: 'json',
    success: function (data) {
        console.log(data.results);

        if(data.results.length > 0) {
            var numberOfResults = data.results.length;
            $('.container').append('<div>Found '+numberOfResults+' results</div>');
            $.each(data.results, function(index, element) {
                if(index < 100) {
                    $('.container').append('<div class="my-class">'+element.locationName+'<div><div>'+element.jobDescription+'</div>');
                }
            });
        } else {
            $('.container').append('<div class="my-class">Sorry nothing found</div>');
        }


    }
});

});

EDIT:

Been messing with this for ages now and have almost got there now it works fine on Chrome and Firefox but on IE/Edge it won't show up at all and on Safari the browser asks for authentication.

$( document ) .ready(function() {
$.ajax({

dataType: 'jsonp',
type: 'GET',
url: 'http://b110030d-7491-48fe-9354-05c0ec0181d7:@www.reed.co.uk/api/1.0/search?keywords=imobilus%20jobs',
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic" + btoa( 'b110030d-7491-48fe-9354-05c0ec0181d7' + ":" + '' ));
},
data: { username: 'b110030d-7491-48fe-9354-05c0ec0181d7', password:'' },
success: function (data) {
console.log(data.results);      

        if(data.results.length > 0) {
            var numberOfResults = data.results.length;
            $('.reed').append('<div>Found '+numberOfResults+' results</div>');
            $.each(data.results, function(index, element) {
                if(index < 100) {
                    $('.reed').append('<div class="my-class">'+element.locationName+'<div><div class="my-class2">'+element.jobDescription+'</div>');
                }
            });
        } else {
            $('.reed').append('<div class="my-class">Sorry nothing found</div>');
        }


    }
});

});

Answer 1

我刚刚使用dataType: 'jsonp'检查了您的代码，它也可以在Chrome中正常运行。

我在chrome中测试了它并且它有效。但是，firefox的身份验证存在问题，但我认为与此

无关

$( document ) .ready(function() {

$.ajax({ 
    type: 'GET',
    url: 'http://www.reed.co.uk/api/1.0/search?keywords=imobilus%20jobs', 
    beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(' b110030d-7491-48fe-9354-05c0ec0181d7' + ":" + '' ));
},
    data: { username: 'b110030d-7491-48fe-9354-05c0ec0181d7', password:'' },
    dataType: 'jsonp',
    success: function (data) {
        console.log(data.results);

        if(data.results.length > 0) {
            var numberOfResults = data.results.length;
            $('.container').append('<div>Found '+numberOfResults+' results</div>');
            $.each(data.results, function(index, element) {
                if(index < 100) {
                    $('.container').append('<div class="my-class">'+element.locationName+'<div><div>'+element.jobDescription+'</div>');
                }
            });
        } else {
            $('.container').append('<div class="my-class">Sorry nothing found</div>');
        }


    }
});

});