JSFiddle - React, Tailwind, and code Playground

check loteria de navidad api El Pais: trying to avoid CORS problem using jquery

by abubelinha

HTML

<body>
CORS problem described in <a href=http://jsfiddle.net/abubelinha/dfxoe519/ target=_blank>http://jsfiddle.net/abubelinha/dfxoe519/</a> 
<p>We would need a proxy.php in the same domain as this javascript request.
<p>proxy.php would get the js request, download the file from the remote server, and echo it so it is returned from the same domain the js request was sent from.
<br>But we'll try to avoid all this using <a href=https://www.smashingmagazine.com/2012/02/beginners-guide-jquery-based-json-api-clients/ target=_blank>JQUERY and <i>appending callback=? to the end of the URL enables us to make cross-domain JSON and AJAX calls</i></a>
<br>(script based on <a target=_blank href=http://jsfiddle.net/abubelinha/0xjpef34/7/>http://jsfiddle.net/abubelinha/0xjpef34/7/</a>)
<hr>
          <form name="fetch">
            <input type="text" placeholder="Enter a value" id="term" value="3065" />
            <select id="requesttype">
            <option value="json">json</option>
            <option value="jsonp">jsonp</option>
            <option value="text">text</option>
            <option value="script">script</option>
            </select>
            <input type="submit" id="search" value="Request data"/>
          </form>

        <section id="poster">
          
        </section>

   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  </body>
</html>

JavaScript

var url='https://api.elpais.com/ws/LoteriaNavidadPremiados?n=12347';
url+= "&callback=?";

$(function(){
	//function definition 
	var getPoster = function(){

		//Grab the movie title and store it in a variable

		var number = $('#term').val();
    var requesttype = $('#requesttype').val();

		//check if the user has entered anything

		if (number == '') {

			//If the input field was empty, display a message

			$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");
		} else {

			//They must have entered a value, carry on with API call, first display a loading message to notify the user of activity
			$('#poster').html("<h2 class='loading'>Your " + requesttype + " request was sent!</h2>");
var url='https://api.elpais.com/ws/LoteriaNavidadPremiados?n='+number;
url = 'https://api.gbif.org/v1/species/'+number+'/children?limit=100';
var api_key = "0b3385b006ff4f8013eaff2b15006edb";
url = "https://api.themoviedb.org/3/search/movie?query=" + number + "&api_key=" + api_key;
if(requesttype=="jsonp") url += "&callback=?"; //para pedir JSONp

			$.getJSON(url ,
//			$.get(url ,
				function(json) {
				//print returned json object to familiarize with API data structure
				// console.log(json);
				// console.log(json.results[0].poster_path);

				//TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this info

					if (json) {//json.total_results
          //alert("chegamos");

						//Display the poster and a message announcing the result
            var jsonobj=JSON.parse(JSON.stringify(json));

						$('#poster').html('<a target=_blank href='+url+'>'+url+'</a><h2 class="loading">Results:</h2>' 
            //+ jsonobj.results[0].key 
            + JSON.stringify(jsonobj)
            + ''); //json.results[0].poster_path
					} else {

								$('#poster').html('<h2 class="loading">We\'re afraid nothing was found for that search.</h2>');
                
	       ...