Jquery Ajax Post Kullanımı

Jquery Ajax Post Kullanımı

Jquery Ajax Post Kullanımı

Jquery Ajax Post Kullanımı yapımı ve Ajax ile POST işlemi hakkında gerekli kodların ve örneklerin olduğu bilgi...

Bu eğitimde AJAX, jQuery ve PHP kullanarak sayfa yenilemeden iletişim formunun nasıl gönderileceğini açıklayacağım. Hepimiz, herhangi bir web formu veya iletişim formu gönderdiğimizde, web sayfasını yenilemeden göndermenin birkaç saniye sürdüğünü gördük.

AJAX, sayfayı yenilemeden form gönderme yeteneğine sahiptir. AJAX'ı burada jQuery ve PHP ile birlikte kullanacağız. Form gönderimi ile her şeyi yapabilmenize rağmen, burada web sitesi yöneticisine basit bir e-posta göndereceğiz.

Ajax, jQuery ve PHP Kullanarak Sayfayı Yenilemeden Gönderme Formu Oluşturma Adımları

Kullanıcı dostu bir iletişim formu oluşturmak için aşağıdaki adımları izlememiz gerekecek:

  1. HTML Form Sayfası Oluşturun
  2. Bootstrap Kitaplığını Dahil Et
  3. JQuery Kitaplığını dahil et
  4. jQuery Form Doğrulama ve AJAX Yöntemi
  5. AJAX Eylem Sayfası oluşturun

1. Bir HTML Form Sayfası oluşturun

Öncelikle kullanıcıdan bilgi almak için basit bir iletişim formu oluşturacağız. Ad indeksli bir sayfa oluşturun . php   ve aşağıdaki kodu içine yapıştırın. Aşağıdaki bilgileri alıyoruz.

İsim, E-posta ve Mesaj

 

 

<form name="ContactForm" method="post" action="">

<div class="form-group">

<label for="name">Name:</label>

<input type="text" class="form-control" id="name">

</div>

<div class="form-group">

<label for="email">Email Address:</label>

<input type="email" class="form-control" id="email">

</div>

<div class="form-group">

<label for="message">Message:</label>

<textarea name="message" class="form-control" id="message">

</textarea>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

 

<div class="message_box" style="margin:10px 0px;">

</div>

Basit iletişim formu sonra da sınıf olan boş bir div oluşturulan  message_box , biz tüm hataları ve başarılı mesajı görüntülemek için bu div kullanacaktır.

2. Bootstrap Kitaplığını Dahil Et

Basit ve hızlı bir stil vermek için burada Bootstrap kitaplığını kullanıyoruz, öyleyse web sayfanızın baş bölümüne Bootstrap kitaplığını dahil edelim.

 

1

<link rel="stylesheet" href="css/bootstrap.min.css">

 

3. jQuery Kitaplığını dahil et

JQuery ve AJAX kullanacağımız için, </body>  etiketini kapatmadan önce jQuery Kitaplığını eklememiz gerekir  .

 

1

<script src="js/jquery.min.js"></script>

Her iki kitaplık dosyasını bu eğitimin başında ve altında bulunan indirme düğmesinden indirebilirsiniz.

4. jQuery Form Doğrulaması ve AJAX Yöntemi

Şimdi web formu verilerimizi de doğrulamamız gerekiyor, bu nedenle tüm giriş alanlarının doldurulduğundan ve girilen e-posta adresinin geçerli olduğundan emin olacağız. Bundan sonra, sayfayı yenilemeden formu göndermek için AJAX yöntemini de kullanacağız.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<script>

$(document).ready(function() {

   var delay = 2000;

   $('.btn-default').click(function(e){

   e.preventDefault();

   var name = $('#name').val();

   if(name == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your Name!</span>'

   );

   $('#name').focus();

   return false;

   }

 

   var email = $('#email').val();

   if(email == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Email Address!</span>'

   );

   $('#email').focus();

   return false;

   }

   if( $("#email").val()!='' ){

   if( !isValidEmailAddress( $("#email").val() ) ){

   $('.message_box').html(

   '<span style="color:red;">Provided email address is incorrect!</span>'

   );

   $('#email').focus();

   return false;

   }

   }

 

   var message = $('#message').val();

   if(message == ''){

   $('.message_box').html(

   '<span style="color:red;">Enter Your Message Here!</span>'

   );

   $('#message').focus();

      return false;

   }

 

   $.ajax

   ({

   type: "POST",

   url: "ajax.php",

   data: "name="+name+"&email="+email+"&message="+message,

   beforeSend: function() {

   $('.message_box').html(

   '<img src="Loader.gif" width="25" height="25"/>'

   );

   },

   success: function(data)

   {

   setTimeout(function() {

   $('.message_box').html(data);

   }, delay);

   }

   });

   });

 

});

</script>

 

E-posta Doğrulama İşlevi

 

 

1

2

3

4

5

6

7

<script>

//Email Validation Function

function isValidEmailAddress(emailAddress) {

    var pattern = /^([a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ ]* )?[ ]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ ]* )?[ ]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i;

    return pattern.test(emailAddress);

};

</script>

Yukarıdaki komut dosyasında da görebileceğiniz gibi, basit doğrulama yapıyoruz, çok basit bir komut dosyası, sadece adın boş olup olmadığını kontrol ediyor, sonra imlecini ad alanına odaklıyor ve ayrıca . message _ box  div, aynısını e-posta ve mesaj alanları için yapıyoruz. Ayrıca, yukarıdaki isValidEmailAddress ( )   işlevini kullanarak geçerli olan veya olmayan e-postaları kontrol ediyoruz  .

Bütün alanlar doldurulmalı ve kullanıcı basın Gönder düğmesini zaman, AJAX için tüm giriş alanları veri gönderir ajax . php  sayfası, e-postayı web yöneticisine gönderecektir.

5. Bir AJAX Eylem Sayfası oluşturun

Ajax adıyla bir sayfa oluşturun . php , bu basit PHP posta işlevini kullanarak web yöneticisine e-posta gönderecektir. PHPMailer kullanarak PHP'de e-posta göndermenin tercih edilen yolu,  ancak bu öğreticiyi basit tutmak için burada posta işlevini kullanıyorum, ancak hepinize PHPMailer'ı kullanmanızı önereceğim. Aşağıdaki komut dosyasını kopyalayıp ajax'a yapıştırın  . php

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<?php

if ( ($_POST['name']!="") && ($_POST['email']!="")){

$name = $_POST['name'];

$email = $_POST['email'];

$message = $_POST['message'];

 

$to = "[email protected]";

$subject = "AllPHPTricks Contact Form Email";

$message = "<p>New email is received from $name.</p>

<p>$message</p>";

 

// Always set content-type when sending HTML email

$headers = "MIME-Version: 1.0" . " ";

$headers .= "Content-type:text/html;charset=UTF-8" . " ";

$headers .= "From: <".$email.">" . " ";

$sent = mail($to,$subject,$message,$headers);

if($sent){

echo "<span style='color:green; font-weight:bold;'>

Thank you for contacting us, we will get back to you shortly.

</span>";

}

else{

echo "<span style='color:red; font-weight:bold;'>

Sorry! Your form submission is failed.

</span>";

}

}

?>

Yukarıdaki komut dosyasında $ to = " [email protected] " değişkenindeki e-postanızı değiştirdiğinizden emin olun ;

Umarım hepiniz bu iletişim formunu web sitenize kolayca uygulayabilirsiniz, herhangi biri hala sorun yaşıyorsa, sorununuzu aşağıdaki yorum bölümünde bırakabilirsiniz.