v2.5.2
Giriş yap

jQuery ve ajax kullanırken ERR_BLOCKED_BY_CLIENT hatası alıyorum

ozermert26
613 defa görüntülendi
11

ajax öğrenmeye çalışıyorum. Ancak google chrome konsolu aşağıdaki hatayı gösteriyor:

ERR_BLOCKED_BY_CLIENT error

Herhangi bir reklam engelleyici vs. kullanmadan denediğimde sonuç değişmedi. Aşağıdaki koda bakıp hatamın ne olduğunu yazar mısınız?

kod:

<!DOCTYPE html>
<html lang="tr">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>document</title>
<script src="jquery.js"></script>
<script src="javaScriptFunctions.js"></script>
</head>
<body>
<h1>Enter your name</h1>
<form id="form" name="form">
<label>Enter your name: <input id="name" name="name"></label><br>
<input type="submit" id="submit" value="OK">
</form>
<script>
document.getElementById('submit').onclick = function(){
    event.preventDefault();
    var form = $("#form").serialize();
    $.ajax({
        type:"GET",
        data: form //Formu aynı sayfadan aynı sayfaya göndermeye çalıştığım için url parametresini kullanmadım
    })
}
</script>
</body>
</html>
html javascript jquery
Cevap yaz
Cevaplar (11)
gokcin
1034 gün önce

Ayrı bir post kontrol sayfası yap. ve o sayfaya post işlemi ile kontrol edersen daha rahat edebilirsin.
ajax.php gibi bir sayfa içersinde parametreler ile kontrol et.

0
#006360
abdullahx
1035 gün önce

#006335 numaralı mesajınızda yazan kodlar çalışıyor, sadece <script src="javaScriptFunctions.js"></script> satırını sildim. Başka bir sebepten dolayı hata alıyorsunuz siz.

0
#006352
ozermert26
1035 gün önce

Ben reklam engelleyici kullanıyordum fakat kapattım sırf denemek için. Ad yerine isim de yazdım fakat sonuç düzelmedi. Yani hala sonuç düzelmedi.

0
#006351
abdullahx
1035 gün önce

Add block kullanıyor musunuz?

Bir de input name in adını 'ad' değil de 'isim' olarak değiştirip deneyin.

0
#006346
ozermert26
1035 gün önce

Peki bu durumda çözüm ne olabilir? Ben $.get veya $.post kullanmayıp $.ajax ile gönderirsem, type'ı da get olarak belirlersem sorun ortadan kalkıyor ama bu hata niye oluşuyor? BU işi gerçekten yapmayı sevdiğim için de mantığını öğrenmek istiyorum.

0
#006345
abdullahx
1035 gün önce

Şu an fark ettim aslında, bu iki kullanım arasında küçük bir nüans var, ikisi de belirli koşullarda çalışıyor, şöyle ki;

Eğer süslü parantez KULLANMAZSANIZ siz $.get veya $.post yöntemine (ve ajax a da aynı zamanda) kendiniz data ekleyemiyorsunuz. Yani bu örnekte siz posttaki verileri serialize() ettiğinizde $.get in data parametresine otomatik olarak key=value şeklinde veri koymuş oluyorsunuz. Yani ad=mehmet gibi oluştuğu için süslü parantez eklemeye gerek kalmıyor. Veri direkt olarak string formatında gönderiliyor. PHP tarafında da direkt olarak $_GET['ad'] şeklinde yakalayabilirsiniz. Ama ayriyeten diyelim id değeri eklemek isterseniz atıyorum bunu $.get metodu içerisinde yapamıyorsunuz.

Süslü parantez kullanınca da bu defa göndereceğiniz veriye bir isim vermeden gönderemiyorsunuz, örnekte dedim ya data adının yerine isterseniz siz veri yazın diye, işte bu şekilde elle bir key=value oluşturmak isterseniz süslü parantez açmak zorundasınız. PHP tarafında da bu veriyi sizin süslü parantez içinde verdiğiniz key değeri ile yakalarsınız.

Aslında serialize() işlemlerinde süslü parantez kullanmak işi biraz uzatmak gibi oluyor doğrudur. Başta ciddi bir hata demişim ama yanılmışım sanırım.

Zaten $.get veya $.post metodlarının dokümantasyon sayfalarına göz atarsanız data nın object ve string değerler alabileceğini görebilirsiniz. Umarım aradaki farkı açıklayabilmişimdir. Ben de yeni şeyler öğrenmiş oldum :)

0
#006339
ozermert26
1035 gün önce

@abdullahx Fakat $.get yerine $.post yazınca işlem başarıyla tamamlanıyor. $.get'in ne farkı var ki? Yani syntax aynı diye biliyorum. jQuery'nin son sürümünü kullanıyorum.

0
#006337
abdullahx
1035 gün önce

Merhaba;

$.get kullanımında yine hata yapmışsınız, aşağıdaki kod ile karşılaştırırsanız hatanızı fark edebilirsiniz. Bir de jquery gibi js dosyalarını head kısmında değil de body etiketini kapatmadan hemen önce çağırırsanız sayfanın gözle görülen yüklenme hızı artar.

Her zaman güncel olmaya çalışın yani jquery nin son sürümünü kullanmaya gayret edin. Kod yapınız da güncel olsun. JQuery nin 3. sürümlerinden itibaren click, change... gibi direkt olay dinleyicileri kullanımdan kaldırıldı. He yine çalışır ama kullanılmması tavsiye ediliyor. Bunun yerine event lar için .on .trigger gibi metodlar öneriliyor.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Denemeler</title>
</head>
<body>
<form id="denemeFormu">
    <label>Ad: <input name="ad"></label><br>
    <input id="gonder" type="submit" value="gönder">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="javaScriptFunctions.js"></script>
<script>
    $("#denemeFormu").on("submit", function(e){
        e.preventDefault();

        $.get('ajax.php', {
            data: $(this).serialize() // Buradaki data yazısı tamamen isteğe bağlı, siz isterseniz veri deyin
        }).done(response => {
            alert(`başarılı: ${response}`)
        })

        // Ben ajax işlemlerinde success fonksiyonuna karşılık gelen .done metodunu kullanmayı tercih ediyorum, daha hoş geliyor bana, tamamen tercrih meselesi. Bu kodun yaptığı işlemin aynısını aşağıdaki yorum satırında olan kod bloğu ile de yapabilirsiniz
        /*$.get('ajax.php', {
            data: $(this).serialize()
        }, function (response) {
            alert(`başarılı: ${response}`)
        })*/
    })
</script>
</body>
</html>
0
#006336
ozermert26
1035 gün önce

@abdullahx Hocam merhaba.

Peki şu kodlar hakkında ne düşünüyorsunuz? 

<?php
if(isset($_GET)){
echo'get tanımlandı';
}

<!DOCTYPE html>
<html lang="tr">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Denemeler</title>
<script src="jquery.js"></script>
<script src="javaScriptFunctions.js"></script>
</head>
<body>
<form method="GET" id="denemeFormu">
<label>Ad: <input name="ad"></label><br>
<input id="gonder" type="submit" value="gönder">
</form>
<script>
$("#gonder").click(function(gonder){
gonder.preventDefault();
$.get("ajax.php",$("#denemeFormu").serialize(),function(basarili){
alert("başarılı "+basarili);
})
})
</script>
</body>
</html>

Yine aynı hatayı alıyorum.

0
#006335
abdullahx
1036 gün önce

@justatakan,hocam lütfen ezbere konuşmayalım, onlick ve/veya diğer eventları bu şekilde de dinleyebiliriz, bu kullanım yanlış değil
https://www.w3schools.com/jsref/event_onclick.asp

Sorunun sebebine gelecek olursak ajax kullanımında ciddi bir hata var, aynı sayfaya gönderiyorum diye url yani ajax ın tek zorunlu parametresini yazmamışsınız. Aynı sayfaya istek göndermek için url için window.location.href kullanın.

1
#006328
justatakan
1036 gün önce

Javascript tarafında hataların var. onclick eylemini dinlemek için kullandığın yapı doğru değil.
Bu tarafta 2 seçeneğin var. İstersen document içerisinde yer alan .addEventListener metodu ile veya istersen jQuery içerisinde yer alan .on metodu ile tıklama eylemini dinleyebilirsin.

addEventListener

document.getElementById('submit').addEventListener('click', e => {

    e.preventDefault();
    let form = $("#form").serialize();
    
    $.ajax({
    type: "GET",
    data: form
    })

})

jQuery on

$("#submit").on("click", e => {

    e.preventDefault();
    let form = $("#form").serialize();
    
    $.ajax({
    type: "GET",
    data: form
    })
    
})

Veya aynı metodlar ile form elemanının submit eylemini dinleyebilir ve işlemlerini o şekilde gerçekleştirebilirsin.

0
#006325