Bilgisayar » ajax https://www.bilgisayar.me Wed, 29 Aug 2018 20:31:06 +0000 tr-TR hourly 1 https://wordpress.org/?v=4.2.29 Jquery ve PHP/MYSQL ile text etiketini otomatik olarak tamamlama https://www.bilgisayar.me/index.php/2015/08/05/jquery-ve-phpmysql-ile-text-etiketini-otomatik-olarak-tamamlama/ https://www.bilgisayar.me/index.php/2015/08/05/jquery-ve-phpmysql-ile-text-etiketini-otomatik-olarak-tamamlama/#comments Wed, 05 Aug 2015 20:59:39 +0000 http://www.bilgisayar.me/?p=1492 YÜKLE DEMO]]>

 
 
 

İlk önce aşağıdaki bağlantıları sayfanıza <body> etiketinin hemen üzerine ekleyin.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

CSS
<body> etiketinin hemen üzerine ekleyin.

<style>
input[type="text"]{
    border-radius: 0px !important;
    background-clip: padding-box !important;
    color: #858585;
    background-color: #FBFBFB;
    border: 1px solid #D5D5D5;
    font-family: inherit;
    transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
    box-shadow: none;
}
.dropdown-menu {
    min-width: 200px !important;
}
</style>

HTML
<body> etiketinin hemen altına ekleyin.

<div class="col-lg-6">
      <div class="input-group input-group-lg">
        <input class="form-control" type="text" id="sehirara">
        <span class="input-group-btn">
        <button class="btn btn-default" type="button">Ara</button>
        </span> </div>
        <div class="input-group-btn" id="menuac">
          <ul class="dropdown-menu" id="liyapistir">
          </ul>
        </div>
    </div>

JQuery
</body> etiketinin hemen üzerine ekleyin.

<script>
(function($){
    $(document).on("keyup", "#sehirara",function(){
		var sehirara = $("#sehirara").val();
		if (sehirara.length > 2){ // aranılan kelime 2 harften fazla olmallı
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: {
                    sehir: sehirara,
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert('Hata: ' + xhr.responseText);
                },
                success: function (data) {
				    $("#menuac").addClass('open');
                    $("#liyapistir").html(data)
                }
            });
		}
	});
	$(document).on("click", "#liyapistir li a",function(){
		$("#sehirara").val($(this).html());
		$("#menuac").removeClass('open');
	});
	$(document).on("click", "body",function(){
		$("#menuac").removeClass('open');
	});
})(jQuery);
</script>

PHP
ajax isminde bir php sayfası (ajax.php) oluşturun ve aşağıdaki PHP kodunu bu sayfanın içne kopyalayın. Varitabanına bağlantı kurmayı unutmayın.

<?PHP
$db_host = "localhost"; //Host address
$db_name = "veritabaniismi"; //veritabani ismi
$db_user = "veritabani kullanici ismi"; //veritabani kullanici ismi
$db_pass = "sifre"; //sifre
$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_name);

$mysqli->query("SET NAMES utf8");
if(mysqli_connect_errno()) {
    echo "Hata Oluştu: " . mysqli_connect_errno();
    exit();
}

$sehir = $mysqli->real_escape_string($_POST['sehir']);
$sql="SELECT * FROM iller WHERE sehir LIKE'%".$sehir."%' ORDER BY sehir ASC LIMIT 15";
$result = $mysqli->query($sql);
$ret = '';
if ($result->num_rows){
    while ($nt = $result->fetch_array()){
        $ret .= '<li id="'.$nt['id'].'"><a href="#">'.$nt['sehir'].'</a></li>';
    }
} else {
	$ret .= '<li> Şehir Bulunamadı</li>';
}
echo $ret;
?>

Veritabanınızda iller tablosu oluşturun.

CREATE TABLE IF NOT EXISTS `iller` (
  `id` int(11) NOT NULL,
  `sehir` varchar(50) DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=82 DEFAULT CHARSET=utf8;

En son olarakda aşağıdaki illeri bu tablonun içine yerlştirin.

INSERT INTO `iller` (`id`, `sehir`) VALUES
(1, 'ADANA'),
(2, 'ADIYAMAN'),
(3, 'AFYON'),
(4, 'AĞRI'),
(68, 'AKSARAY'),
(5, 'AMASYA'),
(6, 'ANKARA'),
(7, 'ANTALYA'),
(75, 'ARDAHAN'),
(8, 'ARTVİN'),
(9, 'AYDIN'),
(10, 'BALIKESİR'),
(74, 'BARTIN'),
(72, 'BATMAN'),
(69, 'BAYBURT'),
(11, 'BİLECİK'),
(12, 'BİNGÖL'),
(13, 'BİTLİS'),
(14, 'BOLU'),
(15, 'BURDUR'),
(16, 'BURSA'),
(17, 'ÇANAKKALE'),
(18, 'ÇANKIRI'),
(19, 'ÇORUM'),
(20, 'DENİZLİ'),
(21, 'DİYARBAKIR'),
(81, 'DÜZCE'),
(22, 'EDİRNE'),
(23, 'ELAZIĞ'),
(24, 'ERZİNCAN'),
(25, 'ERZURUM'),
(26, 'ESKİŞEHİR'),
(27, 'GAZİANTEP'),
(28, 'GİRESUN'),
(29, 'GÜMÜŞHANE'),
(30, 'HAKKARİ'),
(31, 'HATAY'),
(33, 'İÇEL'),
(76, 'IĞDIR'),
(32, 'ISPARTA'),
(34, 'İSTANBUL'),
(35, 'İZMİR'),
(46, 'KAHRAMANMARAŞ'),
(78, 'KARABÜK'),
(70, 'KARAMAN'),
(36, 'KARS'),
(37, 'KASTAMONU'),
(38, 'KAYSERİ'),
(79, 'KİLİS'),
(71, 'KIRIKKALE'),
(39, 'KIRKLARELİ'),
(40, 'KIRŞEHİR'),
(41, 'KOCAELİ'),
(42, 'KONYA'),
(43, 'KÜTAHYA'),
(44, 'MALATYA'),
(45, 'MANİSA'),
(47, 'MARDİN'),
(48, 'MUĞLA'),
(49, 'MUŞ'),
(50, 'NEVŞEHİR'),
(51, 'NİĞDE'),
(52, 'ORDU'),
(80, 'OSMANİYE'),
(53, 'RİZE'),
(54, 'SAKARYA'),
(55, 'SAMSUN'),
(63, 'ŞANLIURFA'),
(56, 'SİİRT'),
(57, 'SİNOP'),
(73, 'ŞIRNAK'),
(58, 'SİVAS'),
(59, 'TEKİRDAĞ'),
(60, 'TOKAT'),
(61, 'TRABZON'),
(62, 'TUNCELİ'),
(64, 'UŞAK'),
(65, 'VAN'),
(77, 'YALOVA'),
(66, 'YOZGAT'),
(67, 'ZONGULDAK');
]]> https://www.bilgisayar.me/index.php/2015/08/05/jquery-ve-phpmysql-ile-text-etiketini-otomatik-olarak-tamamlama/feed/ 0 Jquery Ajax ile PHP sayfasından veri cağrılma örnekleri https://www.bilgisayar.me/index.php/2015/06/28/jquery-ajax-ile-php-sayfasindan-veri-cagrilma-ornekleri/ https://www.bilgisayar.me/index.php/2015/06/28/jquery-ajax-ile-php-sayfasindan-veri-cagrilma-ornekleri/#comments Sun, 28 Jun 2015 20:37:29 +0000 http://www.bilgisayar.me/?p=937 Jquery ile herhangi bir sayfayı yenilemeden sadece istenilen etiketin içeriğini değistirebiliriz.

Örneğin, aşağıdaki div etikenin içeriğini bütün bir sayfayı yenilemeden AJAX ile herhangi bir içerik ile değiştirebiliriz.

<div class="veri">Bu DIV etiketini değiştir</div>

ajax.php

<?PHP
 echo 'Bu div etiketi yenisi ile güncellendi.';	
?>

Örnek 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" onclick="ajaxguncelle();" />
<script>
// kullanımı: ajaxguncelle();
function ajaxguncelle() {
	var istek = $.ajax({
		url: "ajax.php",
		type: "GET",			
		dataType: "html" // xml, json, script, veya html
	});
	
	istek.done(function(msg) {
		$("#divguncelle").html(msg);			
	});
	
	istek.fail(function(jqXHR, textStatus) {
		alert( "Hata Oluştu: " + textStatus );
	});
}
</script>
</body>
</html>

Örnek 2:

ajaxguncelle işlevini biraz daha genelleyelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" onclick="ajaxguncelle('divguncelle');" />
<script>
// kullanımı: ajaxguncelle('divguncelle');
function ajaxguncelle(selector) { 
	var istek = $.ajax({
		url: "ajax.php",
		type: "GET",			
		dataType: "html" // xml, json, script, veya html
	});
	
	istek.done(function(msg) {
		$("#" + selector).fadeOut().html(msg).fadeIn();			
	});
	
	istek.fail(function(jqXHR, textStatus) {
		alert( "Hata Oluştu: " + textStatus );
	});
}
</script>
</body>
</html>

Örnek 3:

Bu örneğimizde input etiketine bir id tayin ettik

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" id="guncelle"/>
<script type="text/javascript" >
$(document).ready(function(){
	$(document).on("click", "#guncelle", function(){
		var istek = $.ajax({
			url: "ajax.php",
			type: "GET",			
			dataType: "html" // xml, json, script, veya html
		});
		
		istek.done(function(msg) {
			$("#divguncelle").fadeOut().html(msg).fadeIn();			
		});
		
		istek.fail(function(jqXHR, textStatus) {
			alert( "Hata Oluştu: " + textStatus );
		});
	})
});
</script>
</body>
</html>

Örnek 4:

$.get kullanarak

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" id="guncelle"/>
<script type="text/javascript" >
$(document).ready(function(){
    $(document).on("click", "#guncelle", function(){
        $.get( "ajax.php", function( msg ) {
            $("#divguncelle").fadeOut().html(msg).fadeIn();		
        });
    })
});
</script>
</body>
</html>

Diğer Örnekler:

<script type="text/javascript" >
$(document).ready(function(){
    $(document).on("click", "#guncelle", function(){
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "html" // xml, json, script, veya html
        }).done(function(msg) {
            $("#divguncelle").fadeOut().html(msg).fadeIn();			
        }).fail(function(jqXHR, textStatus) {
            alert( "Hata Oluştu: " + textStatus );
        });
    });
});
</script>

<script type="text/javascript" >
$(document).ready(function(){
    $(document).on("click", "#guncelle", function(){
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "html", // xml, json, script, veya html
            success: function(msg){
                $("#divguncelle").fadeOut().html(msg).fadeIn();	
            }
        });
    });
});
</script>

Yukarıdaki örneklerde de görüldüğü üzere bir HTML etiketinin içeriğini değişik kodlamalar ile Jquery’nin AJAX özelliğini kullanarak değiştirebiliriz.

]]> https://www.bilgisayar.me/index.php/2015/06/28/jquery-ajax-ile-php-sayfasindan-veri-cagrilma-ornekleri/feed/ 0 Şehirler/ilçeler veritabanı, ve seçenek menüsünü şehirlere göre, ilçeleri güncelleme https://www.bilgisayar.me/index.php/2015/06/22/sehirlerilceler-veritabani-ve-secenek-menusunu-sehirlere-gore-ilceleri-guncelleme/ https://www.bilgisayar.me/index.php/2015/06/22/sehirlerilceler-veritabani-ve-secenek-menusunu-sehirlere-gore-ilceleri-guncelleme/#comments Mon, 22 Jun 2015 19:49:11 +0000 http://www.bilgisayar.me/?p=834 YÜKLE DEMO]]> Geçenlerde, Türkiye’ deki şehirler ve ilçeler varitabanına ihtiyacım olmuştu. İnternette bir veritanı buldum ve bunu sizler ile paylaşmak istedim. Aynı zamanda JQuery’in AJAX özelliğini kullanarak seçenek menüsünü illere göre, ilçeleri nasıl dolduracağımızı anlatmaya çalışacağım.

Sadece şehirler ve İlçeler veritabanını yüklemek isterseniz burayı tıklayın.

Bir index.php sayfası oluşturun ve aşağıdaki kodu <body> etiketinin içine yapıştırın.

<select id="iller" style="font-size:24px">
    <option value=""></option>
<?PHP
    //veritabanına bağlantı yapmayı unutmayın.
    $sql = "SELECT id,sehir from iller ORDER BY sehir ASC";
    $result = $mysqli->query($sql);
    $opt = '';
    while($nt=$result->fetch_array()){
        $opt .= '<option value="'.$nt['id'].'">'.$nt['sehir'].'</option>';
    }
    echo $opt;
?>    
</select>
<select id="ilceler" style="font-size:24px"></select>

Oluşturmuş olduğunuz index.php sayfasında, </body> etiketini tam üstune aşağıdaki jquery kodunu yapıştırın.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on ("change","#iller", function(){
        var menuid = $(this).val();
        $.ajax({
            type: "POST",
            url: "ajax.php",//"models/ajax.php",
            data:  "id=" + menuid,
            success: function(html){
                $("#ilceler").html(html);
            }
        });
    });
});
</script>

Daha sonra ajax.php sayfası oluşturun ve aşağıdaki kodu bu sayfanın içine yapıştırın.

<?PHP include "db.php";// veritabanı bağlantısının olduğu sayfa
    $sql = "SELECT `id`,`ilce` from `ilceler` WHERE `sehir_id`=".(int)$_POST['id']." ORDER BY `ilce` ASC";
    $result = $mysqli->query($sql);
    $opt = '';
    while($nt=$result->fetch_array()){
        $opt .= '<option value="'.$nt['id'].'">'.$nt['ilce'].'</option>';
    }
    echo $opt;
?>

 
 
 

]]> https://www.bilgisayar.me/index.php/2015/06/22/sehirlerilceler-veritabani-ve-secenek-menusunu-sehirlere-gore-ilceleri-guncelleme/feed/ 0