v2.5.2
Giriş yap

PROTOTÜRK API KULLANIMI

mtvartemis
774 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 1

kendimi geliştirmek amacıyla prototürkün desteklediği apı sistemini kullanmak istedim ve şu şekilde bir şablon oluşturdum


<!doctype html>
<html lang="tr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>Hello, world!</title>
  </head>
  <body>
  
<div class="orta" style="margin:auto; padding:20px;margin-top:50px; width:500px;min-height:500px; background-color:#eee">
<form method="post" id="form">
<label for="arama" class="form-label">Prototürk Sitesinde Öğrenmek İstediğini Ara</label>
<input type="text" name="arama" id="arama" class="form-control"><center><button type="submit" class="btn btn-success mt-2">Ara</button></center>

</form> <hr id="cizgi">
<div class="card mb-3 mt-3" style="max-width: 540px;" id="var">
  <div class="row g-0">
    <div class="col-md-4">
      <img style="border:none" class="img-thumbnail mt-2 ml-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title" id="sonuc-baslik"></h5>
        <p class="card-text" id="sonuc-aciklama"><div class="30"></div></p>
        <p class="card-text"><small class="text-muted" id="sonuc-yazar"> </small></p>
      </div>
    </div>
  </div>
</div>
<div class="card text-white bg-danger mb-3" id="hata">
  
  <div class="card-body" >
    <h5 class="card-title" >Kelime: <span id="hata-kelime"></span></h5>
    <p class="card-text">Aradığınız Kelimeye Ait Makale Bulunamadı</p>
  </div>
</div>
</div>
<script>
$("#var").hide();
$("#hata").hide();
$("#cizgi").hide();

$(document).on("submit", "#form", function(event){ 
      event.preventDefault();
      let kelime = $("#arama").val();
      
      $.ajax({
      url :"https://prototurk.com/api/css/"+kelime+".json",
      type : "GET",
      success : function(proto) {
      $("#var").show();
      $("#cizgi").show();
      $("#sonuc-baslik").html(proto.title);
      $("#sonuc-aciklama").html(proto.description);
      $("#sonuc-yazan").html(proto.author);
      },
      error : function(){
        $("#hata").show();
        $("#hata-kelime").html(kelime);
      $("#cizgi").show();
      }

     });
    }); 
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    
  </body>
</html>

kodlarda burada fakat ajaxta veri almak istediğimde
konsolda

- Access to XMLHttpRequest at 'https://prototurk.com/api/css/all.json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- jquery-3.5.1.js:10099 GET https://prototurk.com/api/css/all.json net::ERR_FAILED
send @ jquery-3.5.1.js:10099
ajax @ jquery-3.5.1.js:9682
(anonymous) @ protoapi.php:52
dispatch @ jquery-3.5.1.js:5429
elemData.handle @ jquery-3.5.1.js:5233

hatası aldım ne yapmalıyım bu hatayı gidermek için bide veriyi çektikten sonra 

// 20201228191652
// https://prototurk.com/api/css/all.json

{
  "author": "tayfunerbilen <[email protected]>",
  "title": "CSS'de all Özelliği",
  "name": "all",
  "syntax": "all: initial | inherit | unset;",
  "js_syntax": "object.style.all="initial"",
  "description": "Elemanın tüm css özelliklerini başlangıçtaki ya da devralınmış özelliklerine geri döndürür.",
  "version": "CSS3",
  "browser_support": "css/properties/all.json",
  "values": [
    {
      "value": "initial",
      "description": "Tüm özellikleri başlangıç değerine döndürür yani sıfırlar."
    },
    {
      "value": "inherit",
      "description": "Tüm özellikleri üst nesnesinden devraldığı değerlere döndürür."
    },
    {
      "value": "unset",
      "description": "Tüm özellikleri üst nesnesinden devralıyorsa ona, almıyorsa varsayılan değerlerine geri döndürür."
    }
  ],
  "examples": [
    {
      "code": "<style>n    html {n        color: blue;n    }n    .test {n        background: red;n        color: yellow;n        direction: rtl;n    }n    .test.initial {n        all: initial;n    }n    .test.inherit {n        all: inherit;n    }n    .test.unset {n        all: unset;n    }n</style>nn<div class="test">bu bir testtir.</div>n<div class="test initial">bu bir testtir.</div>n<div class="test inherit">bu bir testtir.</div>n<div class="test unset">bu bir testtir.</div>",
      "description": "Tüm değerlerini tek bir örnekte açıklamak gerekirse;"
    }
  ],
  "animatable": false
}

value değerlerini nasıl listelerim

html php javascript jquery json
Cevap yaz
Cevaplar (1)
bgokcol
1222 gün önce

CORS yüzünden hata alıyorsunuz. Öncelikle CORS'u araştırın, hatayı anlamak için. Burada yapılabilecek birkaç seçenek var:

1) Prototurk sunucu tarafında ayarlama yaparak CORS politikasını ayarlayıp size izin verecek.
2) İlgili veriyi PHP veya farklı bir backend dili ile sunucu tarafında çekip göstereceksiniz.
3) Cors Anywhere servisini kullanarak bu engeli aşacaksınız.

Çözüm 2:
Örneğin verigetir.php diye bir sayfanız olur, bu sayfanın içeriği direkt olarak Prototurk Api'den veri çekip ekrana yazacak şekilde olur:

<?php
echo file_get_contents('https://prototurk.com/api/css/all.json');
?>

Ajax ile https://prototurk.com/api/css/all.json adresi yerine kendi sunucunuzdaki verigetir.php sayfasına istek yaparsınız.

Çözüm 3:
Ajax ile https://prototurk.com/api/css/all.json adresi yerine https://cors-anywhere.herokuapp.com/https://prototurk.com/api/css/all.json adresine istek atarsınız, bu servis otomatik CORS'u çözüyor sizin için.

1
#003169