Bir formu ajaxify için jQuery'yi nasıl kullanırım?

Question

JQuery eklentileri kullanmadan AJAXIFY bir form deniyorum. Bunun gerçekleşmesi için süreç nedir? Benim formum var. Eylemi ne yapmalıyım? Başlık senaryosu ne olmalı? Herhangi bir eklenti kullanmak istemediğimi unutmayın. Sadece jquery kullanarak formları ajaxifying için temel bir algoritmaya ihtiyacım var.

Answer 1

Eylem, whatever it would be if you weren't using JavaScript olmalıdır.

Not: Aşağıda tüm bağlantılar Sonra bind a function to the submit olay serialized form verileri ve bu kullanılan) bir Ajax request (muhtemelen reading the URI from the action attribute yapmak olacağını jQuery belgelerin ilgili bölümünde)

gidin. Gönderme etkinlikleri için prevent the default action olmalıdır.

jQuery'nin X-Requested With HTTP üstbilgisi oluşturduğuna inanıyorum. Bu nedenle, eğer mevcutsa (doğru değerle), farklı veriyi geri getirmek için sunucu tarafındaki işleminizi değiştirmeniz gerekir. Bu sadece farklı bir görünüme geçmek kadar basit olabilir (eğer bir MVC kalıbı kullanıyorsanız).

Answer 2

Bu, bağlıdır. Sadece sayfayı yeniden olmadan değerleri göndermek isterseniz, ben o zaman fonksiyonunu

function submitValues() { 
    //do stuff here 
    jQuery.ajax({ 
     //your ajax parameters here 
    }); 

    //this is important to cancel the default action on submit (ergo. go to the address as defined in action 
    return false; 
} 

kuracak, bu sonra bu kadar

jQuery('form#myForm').bind(submitValues); 

gibi bir işleve formun gönderme etkinliğini bağlamak önermek

ajax komutunda daha fazla bilgi için, bkz. here

Answer 3

En basit yöntem $ .load() yöntemini kullanmaktır.

$ .Load (aksiyon, veri, geri arama)

eylem bir PHP komut dosyası, ASP sayfası veya basitçe başka bir web sayfası olabilir. Veri boşsa, bir GET gerçekleştirir. Aksi takdirde, bir POST gerçekleştirir. Geri bildirim yöntemi, yöntem tamamlandığında yürütülür (zorunlu değil). Örneğin

http://docs.jquery.com/Ajax/load

: form gönderildiğinde

<form> 
    $.load("scripts/processOrder.php", { item: itemID, quantity: ordered }, function { 
     window.location.href = "orderComplete.htm"; 
    }); 
</form> 

, processOrder komut ItemID ile yürütülür ve veriler olarak geçen verileri istenir. Komut tamamlandığında, tarayıcı ek işlem veya durum gösterimi için orderComplete sayfasına gider.

Ajaxification üzerinde daha fazla denetim yapmak isterseniz, $ .get, $ .post veya $ .ajax yöntemlerini kullanabilirsiniz.