JS Eğitimi

ANA SAYFA JS Giriş JS Nereye JS Çıktı JS İfadeleri JS Sözdizimi JS Yorumları JS Değişkenleri JS Let JS Sabiti JS Operatörleri JS Aritmetiği JS Ataması JS Veri Türleri JS Fonksiyonları JS Nesneleri JS Etkinlikleri JS Dizeleri JS Dize Yöntemleri JS Dizisi Arama JS Dize Şablonları JS Numaraları JS Numarası Yöntemleri JS Dizileri JS Dizi Yöntemleri JS Dizi Sıralaması JS Dizi Yineleme JS Dizi Sabiti JS Tarihleri JS Tarih Formatları JS Tarih Alma Yöntemleri JS Tarih Ayar Yöntemleri JS Matematik JS Rastgele JS Booleanları JS Karşılaştırmaları JS Koşulları JS Anahtarı JS Döngüsü İçin JS Döngüsü İçin JS Döngüsü JS Döngüsü JS Arası JS Yinelenebilirler JS Setleri JS Haritaları JS Türü JS Tipi Dönüşüm JS Bitsel JS Normal İfade JS Hataları JS Kapsamı JS Kaldırma JS Sıkı Modu Bu Anahtar Kelimeyi JS JS Ok İşlevi JS Sınıfları JS JSON JS Hata Ayıklama JS Stil Kılavuzu JS En İyi Uygulamaları JS Hataları JS Performansı JS Ayrılmış Kelimeler

JS Sürümleri

JS Sürümleri JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Kenar JS Geçmişi

JS Nesneleri

Nesne Tanımları Nesne Özellikleri Nesne Yöntemleri Nesne Görüntüleme Nesne Erişimcileri Nesne Oluşturucuları Nesne Prototipleri Nesne Yinelenebilirler Nesne Kümeleri Nesne Haritaları Nesne Referansı

JS Fonksiyonları

Fonksiyon Tanımları Fonksiyon Parametreleri Fonksiyon Çağırma İşlev Çağrısı İşlev Uygula Fonksiyon Kapanışları

JS Sınıfları

Sınıf Tanıtımı Sınıf Kalıtımı Sınıf Statik

JS Zaman uyumsuz

JS Geri Aramaları JS Asenkron JS Sözleri JS Zaman uyumsuz/Bekliyor

JS HTML DOM'si

DOM Tanıtımı DOM Yöntemleri DOM Belgesi DOM Öğeleri DOM HTML'si DOM Formları DOM CSS'si DOM Animasyonları DOM Olayları DOM Olay Dinleyicisi DOM Gezinme DOM Düğümleri DOM Koleksiyonları DOM Düğüm Listeleri

JS Tarayıcı Malzeme Listesi

JS Penceresi JS Ekranı JS Konumu JS Geçmişi JS Navigatörü JS Açılır Pencere Uyarısı JS Zamanlaması JS Çerezleri

JS Web API'leri

Web API'sine Giriş Web Formları API'sı Web Geçmişi API'si Web Depolama API'sı Web Çalışanı API'si Web Getirme API'sı Web Coğrafi Konum API'sı

JS AJAX

AJAX'a Giriş AJAX XMLHttp AJAX İsteği AJAX Yanıtı AJAX XML Dosyası AJAX PHP AJAX ASP AJAX Veritabanı AJAX Uygulamaları AJAX Örnekleri

JS JSON

JSON'a Giriş JSON Sözdizimi JSON'a karşı XML JSON Veri Türleri JSON Ayrıştırma JSON Stringify JSON Nesneleri JSON Dizileri JSON Sunucusu JSON PHP JSON HTML'si JSON JSONP

JS ve jQuery

jQuery Seçiciler jQuery HTML'si jQuery CSS'si jQuery DOM'si

JS Grafikleri

JS Grafikleri JS Tuval JS Konusu JS Chart.js JS Google Grafiği JS D3.js

JS Örnekleri

JS Örnekleri JS HTML DOM'si JS HTML Girişi JS HTML Nesneleri JS HTML Olayları JS Tarayıcı JS Editörü JS Alıştırmaları JS Testi JS Sertifikası

JS Referansları

JavaScript Nesneleri HTML DOM Nesneleri


JSON PHP


JSON'un yaygın bir kullanımı, bir web sunucusundan veri okumak ve verileri bir web sayfasında görüntülemektir.

Bu bölüm, istemci ve bir PHP sunucusu arasında JSON verilerinin nasıl değiş tokuş edileceğini öğretecektir.


PHP Dosyası

PHP, JSON'u işlemek için bazı yerleşik işlevlere sahiptir.

PHP'deki nesneler, json_encode() PHP işlevi kullanılarak JSON'a dönüştürülebilir :

PHP dosyası

<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

İstemci JavaScript'i

Yukarıdaki örnekten PHP dosyasını istemek için bir AJAX çağrısı kullanan istemcide bir JavaScript:

Örnek

Sonucu bir JavaScript nesnesine dönüştürmek için JSON.parse() kullanın:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();


PHP Dizisi

PHP'deki diziler, json_encode() PHP işlevi kullanıldığında da JSON'a dönüştürülür :

PHP dosyası

<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

İstemci JavaScript'i

Yukarıdaki dizi örneğinden PHP dosyasını istemek için bir AJAX çağrısı kullanan istemcide bir JavaScript:

Örnek

Sonucu bir JavaScript dizisine dönüştürmek için JSON.parse() kullanın:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

PHP Veritabanı

PHP bir sunucu tarafı programlama dilidir ve bir veritabanına erişmek için kullanılabilir.

Sunucunuzda bir veritabanınız olduğunu ve "müşteriler" adlı bir tablodaki ilk 10 satırı istediğiniz istemciden ona bir istek göndermek istediğinizi düşünün.

İstemcide, döndürmek istediğiniz satır sayısını açıklayan bir JSON nesnesi oluşturun.

İsteği sunucuya göndermeden önce, JSON nesnesini bir dizgeye dönüştürün ve PHP sayfasının url'sine parametre olarak gönderin:

Örnek

JavaScript nesnesini JSON'a dönüştürmek için JSON.stringify() kullanın:

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

Örnek açıkladı:

  • Bir "limit" özelliği ve değeri içeren bir nesne tanımlayın.
  • Nesneyi bir JSON dizesine dönüştürün.
  • JSON dizesini parametre olarak kullanarak PHP dosyasına bir istek gönderin.
  • İstek sonuçla birlikte dönene kadar bekleyin (JSON olarak)
  • PHP dosyasından alınan sonucu görüntüleyin.

PHP dosyasına bir göz atın:

PHP dosyası

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

PHP Dosyası açıkladı:

  • PHP json_decode() işlevini kullanarak isteği bir nesneye dönüştürün .
  • Veritabanına erişin ve bir diziyi istenen verilerle doldurun.
  • Diziyi bir nesneye ekleyin ve json_encode() işlevini kullanarak nesneyi JSON olarak döndürün.

Verileri Kullan

Örnek

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}

PHP Yöntemi = POST

Sunucuya veri gönderirken genellikle HTTP POSTyöntemini kullanmak en iyisidir.

Yöntemi kullanarak AJAX istekleri göndermek için POSTyöntemi ve doğru başlığı belirtin.

Sunucuya gönderilen veriler artık send()yöntemin bir argümanı olmalıdır:

Örnek

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text ="";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

PHP dosyasındaki tek fark, aktarılan verileri alma yöntemidir.

PHP dosyası

$_GET yerine $_POST kullanın:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>