Kullanarak $. Basit ajax test için göndermek, ne eksik?

6 Cevap php

İlk defa jquery ile oynamak, ve ben o yüzden daha iyi işlerin nasıl anlayabiliriz çalışma kurmak basit bir AJAX almaya çalışıyorum. Ne yazık ki, ben bir sürü bilmiyorum. Burada komut ile HTML bulunuyor:

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
   function ajax(str){
   $("document").ready(function(){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
       });
     });
 </script> 
</head>  
<body>
 <input type="text" onchange="ajax(this.value)"></input> 
 <p>Age?</p>
</body>
</html>

Ve burada konuşuyor PHP:

<?php
$age = $_POST['age'];

if ($age < 30)
  {
  echo "Young";
  }
else if ($age > 30)
  {
  echo "Old";
  }
else
  {
  echo "you're 30";
  }
?>

6 Cevap

Değil $.post() function str parametre erişimi varsa, emin olun. Bunun yerine bu deneyin:

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
    $("document").ready(function(){
        $('input').change(function() {
             $.post("ajaxjquerytest.php",{'age': $(this).val()},function(response){
                 $("p").html(response);
             });
        });
    });
 </script> 
</head>  
<body>
 <input type="text" />
 <p>Age?</p>
</body>
</html>

DOM tamamen yüklenmeden sonra bu giriş elemanı için onChange işleyicisi ekler.

Eğer $(document).ready() atlarsanız sizin yaklaşım da çalışması gerekir. Fakat elemanına JS fonksiyonu eklemek jQuery ile yapılır daha yoludur.

Bunun yanı sıra, sadece bütün DOM ağacı inşa edildikten sonra $(document).ready() o idam edilmelidir içine kodu kaydırmak gerekir. Senin davan, senin sadece bir fonksiyonu tanımlıyoruz. DOM zaten yüklenene kadar işlev denilen olamaz gibi belge hazır kullanmaya gerek yoktur.

Belgelendirmesini okuyun .post() !

Ben burada sorunun yanıtı tanımlanan olmadığını düşünüyorum. Bu işleve bir parametre olarak kabul edilmelidir. Bu deneyin:

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(response) {
        $("p").html(response);
    });
}

Deftere kod sorunları bir çift vardır.

  1. Eğer sayfasını yüklediğinizde bir JS hatası almak gerekir böylece "ajax" fonksiyonu kuşak kapanış konum gibi görünmüyor.

  2. Sen yazmalısın ya

    function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } or use the $(document).ready as Felix suggested

  3. PHP kod adında bir parametreyi YAŞ bekliyor ama sen gibi görünüyor ama açıkça kodunuzda bir isim vererek değil, sizin gibi uygun bir şekilde adlandırılan bir özelliği ile bir JS sınıf oluşturmak gerekir böylece { AGE: str }. jQuery documentation bunu yaparken bazı örnekler vardır.

  4. Ayrıca, JavaScript this anahtar ile kullanırken dikkatli olun, ne context it's used in dayalı ölçüde farklı anlamlara sahip olabilir. (Bunu kullanarak konum yolu gibi görünüyor sayfanın en altında açıklanmıştır).

Bu sadece Felix'in örnekle başlayalım ve orada olsa çalışmak daha kolay olabilir.

Böyle hata ayıklama sorunları kolay yolu HTTP istekleri görmenizi sağlayan bir araç kullanmaktır. net panel Firebug in deneyin. Yani istek, ne postdata gönderildi yapılan ve ne sunucu yanıt oldu url ne görelim olacaktır. Sonra PHP veya JS kodu sorunu olup olmadığını bileceksiniz.

Bu sizin işlevini değiştirebilirsiniz:

function ajax(str){
    $("document").ready(function(){
        $.post("ajaxjquerytest.php",str,function(){
            $("p").html(response);
        });
    });
}

için:

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(){
        $("p").html(response);
    });
}

İlk olarak, $(document).ready() yapısı sayfa ilk yüklendiğinde yürütür. İkincisi, "belge" tırnak içinde olmamalıdır. Son olarak, daha iyi bir başarı olabilir:

<form>
    <input type="text" />
    <p>Age?</p>
    <input type="submit" />
</form>

ve değiştirin:

$('input').change(function() { ... }

için:

$('form').submit(function() { ... }

Sizin ajax() fonksiyonu document#ready olay işleyicisi ekleme. document#ready sayfanız ilk yüklendiğinde ateş ve tekrar patlar asla olurdu. Yani $.post yürütmek asla. Sadece bu için işlevini değiştirmek.

function ajax(str){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
     });
}

etiketler