{"id":1088,"date":"2014-04-03T15:13:53","date_gmt":"2014-04-03T12:13:53","guid":{"rendered":"http:\/\/www.gncz.net\/?p=1088"},"modified":"2014-04-03T15:13:53","modified_gmt":"2014-04-03T12:13:53","slug":"jquery-ve-ajax-ile-sayfa-yukleme","status":"publish","type":"post","link":"https:\/\/gncz.net\/index.php\/jquery-ve-ajax-ile-sayfa-yukleme.html","title":{"rendered":"Jquery ve ajax ile sayfa y\u00fckleme"},"content":{"rendered":"

Ajax i\u015flemlerinde en \u00e7ok kullan\u0131lan metodlardan biri de sayfalar aras\u0131 ge\u00e7i\u015fleri ajax ile yapmakt\u0131r. Bu bize pek \u00e7ok kolayl\u0131k sa\u011flar. Her sayfan\u0131n kodunu ba\u015ftan yazmak yerine, sadece ilgili yerlerin kodunu yazar\u0131z, ve k\u00fc\u00e7\u00fck birimler halinde y\u00fckleriz.<\/p>\n

\u015eimdi, b\u00f6yle bir i\u015flemi nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 en basit haliyle inceleyelim:<\/p>\n

  <div class=\"links\">\r\n\t\t\t<a href=\"anasayfa.html\">Anasayfa<\/a>\r\n\t\t\t<a href=\"hakkinda.html\">Hakk\u0131nda<\/a>\r\n\t\t\t<a href=\"iletisim.html\">\u0130leti\u015fim<\/a>\r\n\t\t<\/div>\r\n\r\n\t\t<div id=\"sayfa_icerigi\"><\/div><\/pre>\n
Linkler b\u00f6l\u00fcm\u00fcnde yer alan ba\u011flant\u0131lar, ajax iste\u011finin ba\u011flant\u0131lar\u0131. Bu linklere t\u0131klan\u0131nca ajax iste\u011fini ba\u015flataca\u011f\u0131z ve ajax ile gelen cevab\u0131 id=\u201dsayfa_icerigi\u201d divinin i\u00e7ine koyaca\u011f\u0131z.<\/p>\n
$(document).ready(function() {\r\n\t\/\/sayfa ilk y\u00fcklendi\u011finde anaysayfa.html dosyas\u0131n\u0131 \u00e7a\u011f\u0131ral\u0131m.\r\n\t$.ajax({\r\n        type: \"GET\",\r\n        url: \"anasayfa.html\",\r\n        success: function (response) { \r\n            $(\"#sayfa_icerigi\").html(response);\r\n        }\r\n    });\r\n\r\n\t\/\/ilgili linklere t\u0131kland\u0131\u011f\u0131nda bizim fonksiyonumuz \u00e7al\u0131\u015f\u015fs\u0131n.\r\n    $(\".links a\").click(function(){\r\n    \thedef_url = $(this).attr(\"href\");\/\/as\u0131l hedef bu. hedefi \u00f6\u011freniyoruz.\r\n    \t\/\/hedefi ajax ile \u00e7a\u011f\u0131r\u0131yoruz.\r\n    \t$.ajax({\r\n            type: \"GET\",\r\n            url: hedef_url,\r\n            success: function (response) { \r\n                $(\"#sayfa_icerigi\").html(response);\r\n        }\r\n        });\r\n\r\n    \treturn false; \/\/ajax ile y\u00fckledikten sonra ba\u015fka i\u015flem yapm\u0131yoruz. buras\u0131 \u00f6nemli. \r\n    })\r\n})<\/pre>\n
 <\/p>\n
Burada yapt\u0131\u011f\u0131m\u0131z iki temel i\u015flem var:<\/p>\n
1- Dok\u00fcman ilk y\u00fcklendi\u011finde anasayfa.html dosyas\u0131n\u0131 \u00e7a\u011f\u0131r\u0131yoruz. B\u00f6ylece giri\u015f sayfas\u0131n\u0131n bo\u015f kalmamas\u0131n\u0131 sa\u011fl\u0131yoruz.<\/p>\n
2- \u0130kinci a\u015famada yapt\u0131\u011f\u0131m\u0131z ise, \u201clinks\u201d s\u0131n\u0131f\u0131na sahip div\u2019in i\u00e7erisindeki a etiketlerinin t\u0131klanmas\u0131na dair fonksiyon yaz\u0131yoruz. Bu fonksiyonun da temel i\u015flevi, linkin gidece\u011fi adresi al\u0131p, onu ajax ile \u00e7a\u011f\u0131rmak.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ajax i\u015flemlerinde en \u00e7ok kullan\u0131lan metodlardan biri de sayfalar aras\u0131 ge\u00e7i\u015fleri ajax ile yapmakt\u0131r. Bu bize pek \u00e7ok kolayl\u0131k sa\u011flar. Her sayfan\u0131n kodunu ba\u015ftan yazmak yerine, sadece ilgili yerlerin kodunu yazar\u0131z, ve k\u00fc\u00e7\u00fck birimler halinde y\u00fckleriz. \u015eimdi, b\u00f6yle bir i\u015flemi nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 en basit haliyle inceleyelim: <div class=”links”> <a href=”anasayfa.html”>Anasayfa<\/a> <a href=”hakkinda.html”>Hakk\u0131nda<\/a> <a href=”iletisim.html”>\u0130leti\u015fim<\/a> <\/div> <div id=”sayfa_icerigi”><\/div> Linkler b\u00f6l\u00fcm\u00fcnde yer[Devam\u0131n\u0131 Oku…]<\/a><\/p>\n","protected":false},"author":1,"featured_media":785,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[196,197,198,195],"_links":{"self":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1088"}],"collection":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/comments?post=1088"}],"version-history":[{"count":2,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1088\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1088\/revisions\/1090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media\/785"}],"wp:attachment":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media?parent=1088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/categories?post=1088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/tags?post=1088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}