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

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>

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>