Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[PHP] Gửi mail bằng Ajax (đơn giản)

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 30/6/14.

Lượt xem: 12,530

  1. banbaonylong Ko phải assmin

    Trong quá trình làm việc (cụ thể là tuần trước), công ty yêu cầu mình làm 1 cái contact form cho 1 cái web chạy wordpress ;). Mệt mỏi ở chỗ là plugin về contact form nó lại ko phù hợp hoàn toàn với yêu cầu của công ty, buộc lòng mình phải tự viết :(.

    Yêu cầu đặt ra
    • Popup contact form và các form liên wan (confirmation form, success form, fail form).
    • Ajax (dĩ nhiên, chứ bạn submit form thì sao đc cái popup :P)
    • Mail ko nằm ở hôp thư spam.
    • validation có màu mè 1 chút.
    • Mail có đính kèm.
    Cách xử ký
    • Về popup, tuỳ ý mỗi người, nhưng ví dụ của mình sử dụng colorbox: http://www.jacklmoore.com/colorbox, đơn giản ở chỗ bạn chỉ cần
      PHP:
      $.colorbox({inline:truehref:"#applyform"});
      là colorbox tự bay ra :P
    • Về validation, mình sử dụng: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    • Về hàm gửi mail, mình xài PHPMailer chứ ko xài PHP Mail() mặc định nhé, các bạn chú ý vấn đề mail ko gửi vào hôp thư spam.
    • Ajax và xử lí gửi mail thì tự viết :P
    • Một tài khoản gmail dùng để gửi mail. Nếu host bạn có SMTP thì lấy cái đó gửi mail cũng đc.
    Cách làm

    Do mình sẽ đính kèm file nên cách làm chỉ ghi vắn tắt ra cho cá bạn dễ hiểu.
    1. Contact form:
      PHP:
      <form class="applyform">
         <
      p>Name</p>
         <
      class="block">
           <
      input name="name" type="text" class="txt aname" />
         </
      p>
         <
      p>Applied position</p>
         <
      class="block">
           <
      input name="position" type="text" class="txt aposition" />
         </
      p>
         <
      p>Message</p>
         <
      class="block">
           <
      textarea name="mess" class="txtaree amessage" rows="6" cols="64"></textarea>
         </
      p>
         <
      class="block filein">
          <
      input type="file" name="file_attach" class="custom-file-input">
          <
      span id="fname"></span>
         </
      p>
      </
      form>
    2. Một cái nút submit form
      PHP:
      <a id="submitform" href="javascript:;" class="ibtn_send submitform">Send</a>
    3. Hàm vaild cái form (trả về true or false)
      PHP:
      $('.applyform').valid()
    4. Khi nhấn submit, confirmation popup sẽ hiện lên :D. Bạn confirm nội dung thì mới gửi.
      PHP:
      $('.btn_sendconfi').click(function(){
          if($(
      '.applyform').valid()){
              
      //if validation
              
      var user_name = $('.aname').val();
              var 
      user_position = $('.aposition').val();
              var 
      user_message = $('.amessage').val();
              var 
      attach_file = $('input[type=file]')[0].files[0];
             
              
      //data to be sent to server       
              
      var post_data = new FormData();   
              
      post_data.append'userName'user_name );
              
      post_data.append'userPosition'user_position );
              
      post_data.append'userMessage',user_message);
              
      post_data.append'file_attach'attach_file );
             
              $.
      ajax({
                  
      url'ajax.php',
                  
      datapost_data,
                  
      processDatafalse,
                  
      contentTypefalse,
                  
      type'POST',
                  
      dataType:'json',
                  
      success: function(data){
                      
      //load json data from server and output message   
                      
      if(data.type == 'error')
                      {
                          
      //fail to send
                          
      $('#mailerror').html(data.text);
                          $.
      colorbox({inline:truehref:"#failpopup"});
                      }else{
                          
      //success
                          
      $.colorbox({inline:truehref:"#successbox"});
                        
                          
      //reset values in all input fields
                          
      _reset();
                      }
                  }
              });
          }
      });
    5. File ajax. php gửi mail
      PHP:
      require('mail/class.phpmailer.php');

          if(
      $_POST)
          {
              
      $to_Email       "abcdef@gmail.com"//Replace with recipient email address.
              
      $subject        'New application for'//Subject line for emails
            
              //check if its an  ajax request, exit if not
              
      if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
            
                  
      //exit script outputting json data
                  
      $output json_encode(
                  array(
                      
      'type'=>'error',
                      
      'text' => 'Request must come from Ajax'
                  
      ));
                
                  die(
      $output);
              }
            
              
      //check $_POST vars are set, exit if any missing
              
      if(!isset($_POST["userName"]) || !isset($_POST["userPosition"]) || !isset($_POST["userMessage"]))
              {
                  
      $output json_encode(array('type'=>'error''text' => 'Input fields are empty!'));
                  die(
      $output);
              }

              
      //Sanitize input data using  PHP filter_var().
              
      $user_Name filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
              
      $user_Position filter_var($_POST["userPosition"], FILTER_SANITIZE_STRING);
              
      $user_Message filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
            
              
      //additional  php validation
              
      if(strlen($user_Name)<4// If length is less than 4 it will throw an HTTP error.
              
      {
                  
      $output json_encode(array('type'=>'error''text' => 'Name is too short or empty!'));
                  die(
      $output);
              }
             
              if(
      strlen($user_Position)<5//check entered data is numbers
              
      {
                  
      $output json_encode(array('type'=>'error''text' => 'Invalid Position.'));
                  die(
      $output);
              }
              if(
      strlen($user_Message)<5//check emtpy message
              
      {
                  
      $output json_encode(array('type'=>'error''text' => 'Too short message! Please enter something.'));
                  die(
      $output);
              }
            
              
      ### Attachment Preparation ###
              
      $file_attached false//initially file is not attached
              
      $encoded_content '';
              
      $file_name '';
              
      $file_type '';
              if(isset(
      $_FILES['file_attach'])) //check uploaded file
              
      {
                  
      //get file details we need
                  
      $file_tmp_name    $_FILES['file_attach']['tmp_name'];
                  
      $file_name        $_FILES['file_attach']['name'];
                  
      $file_size        $_FILES['file_attach']['size'];
                  
      $file_type        $_FILES['file_attach']['type'];
                  
      $file_error       $_FILES['file_attach']['error'];
                
                  
      //exit script and output error if we encounter any
                  
      if($file_error>0)
                  {
                      
      $mymsg = array(
                      
      1=>"The uploaded file exceeds the upload_max_filesize directive in  php.ini",
                      
      2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
                      
      3=>"The uploaded file was only partially uploaded",
                      
      4=>"No file was uploaded",
                      
      6=>"Missing a temporary folder" );
                    
                      
      $output json_encode(array('type'=>'error''text' => $mymsg[$file_error]));
                      die(
      $output);
                  }
            
                  
      //read from the uploaded file & base64_encode content for the  mail
                  
      $handle fopen($file_tmp_name"r");
                  
      $content fread($handle$file_size);
                  
      fclose($handle);
                  
      $encoded_content chunk_split(base64_encode($content));
                
                  
      //now we know we have the file for attachment, set $file_attached to true
                  
      $file_attached true;
              }

              if(
      $file_attached//continue if we have the file
              
      {
                  
      Mail send   
                  
      $mail = new PHPMailer();

                  
      $mail->IsSMTP();  // telling the class to use SMTP
                  //$mail->SMTPAuth = false;
                  
      $mail->SMTPAuth true;     // turn of SMTP authentication
                  
      $mail->Username "zzzzzzzzzzzzzzzzzzzzzzzzzz@gmail.com";  // SMTP username
                  
      $mail->Password "zzzzzzzzzzzzzzzzzzzzzzzzzz"// SMTP password
                  
      $mail->Host "smtp.gmail.com";
                  
      $mail->SMTPSecure 'ssl';
                  
      $mail->Port 465;
                         
                  
      $mail->From     "no-reply@vietdesigner.net";
                  
      $mail->FromName "Banbaonylong";
                  
      $mail->AddAddress($to_Email$user_Name);

                  
      $mail->Subject  $subject.' '.$user_Position;
                  
      $mail->Body     $user_Message;
                  
      $contact_image_data 'data:'.$file_type.';base64,'.$encoded_content;
                  
      $datazz substr($contact_image_datastrpos($contact_image_data","));
                  
      //            
                  
      $mail->AddStringAttachment(base64_decode($datazz), $file_name'base64'$file_type);
              }  
             
            
              if(!
      $mail->Send()) //output success or failure messages
              
      {
                  
      $output json_encode(array('type'=>'error''text' => $mail->ErrorInfo));
                  die(
      $output);
              }else{
                  
      $output json_encode(array('type'=>'message''text' => 'Hi '.$user_Name .' Thank you for your email'));
                  die(
      $output);
              }
          }    
      Bạn chỉ cần thay đổi các dòng sau để gửi mail:
      • Dòng 6: Thay đổi địa chỉ mà mail sẽ tới
        PHP:
        $to_Email       "abcdef@gmail.com";
      • Dòng 7: Thay đổi tựa đề mail
        PHP:
        $subject        'New application for'
      • Dòng 97 -98: Địa chỉ gmail để sử dụng SMTP của google. bạn có thể sử dụng SMTP khác.
        PHP:
        $mail->Username "zzzzzzzzzzzzzzzzzzzzzzzzzz@gmail.com";  // SMTP username
        $mail->Password "zzzzzzzzzzzzzzzzzzzzzzzzzz"// SMTP password
      • Dòng 100-101:Nếu bạn sử dụng SMTP khác google thì chỉnh chỗ này lại tương ứng ;)
        PHP:
        $mail->SMTPSecure 'ssl';
        $mail->Port 465;
      • Dòng 103-104: Tên hiển thị của mail. Bạn có thể tuỳ chỉnh lung tung ko ảnh hưởng j cả :D
        PHP:
        $mail->From     "no-reply@vietdesigner.net";
        $mail->FromName "Banbaonylong";

    Lưu ý
    • Vì code và hướng dẫn chỉnhsửa wá dài, nên bạn nào có thắc mắc cứ hỏi bên dưới ;). Trong lúc chỉnh sửa để làm tut thì mình có comment dưới những dòng code wan trọng.
    • Code này chỉ sử dụng những hàm cơ bản nên gắn lên wordpress hay framework php khác đều ổn.
    • Nếu gửi ajaxmail thành công mà web trả về 500 Error thì bạn coi lại config.
    • Bạn nào có thể "rút code" hay hơn thì cũng chia sẻ nhé :D.
    Link download source: http://goo.gl/r6gyS6
    Link demo: http://doilafuka.com/ajaxmail/
    (Dĩ nhiên demo hình hài thôi, chứ các bạn gửi mail flood hộp mail mất)

    ...
    Chỉnh sửa lần cuối: 2/7/14
    phumaster.devPhạm Hữu Dư thích bài viết này.
  2. banbaonylong

    banbaonylong Ko phải assmin

    sửa lại code phần attachment :P, lầm lẫn encode/decode :(
    PHP:
    $contact_image_data 'data:'.$file_type.';base64,'.$encoded_content;
    $datazz substr($contact_image_datastrpos($contact_image_data","));
    //          
    $mail->AddStringAttachment(base64_decode($datazz), $file_name'base64'$file_type);
  3. ngunhubo

    ngunhubo Mới đăng kí

    Bác ơi sao em thử gửi thì nó báo:
    SMTP connect() failed.
    Và có cách nào đính kèm nhiều File không ạ?
  4. banbaonylong

    banbaonylong Ko phải assmin

    PHP:
    $mail->Username "zzzzzzzzzzzzzzzzzzzzzzzzzz@gmail.com";  // SMTP username
                
    $mail->Password "zzzzzzzzzzzzzzzzzzzzzzzzzz"// SMTP password
    sửa phần này chưa?
  5. ngunhubo

    ngunhubo Mới đăng kí

    Đã chỉnh rồi bác, mail đến, mail gửi em chỉnh hết rồi ạ!
  6. banbaonylong

    banbaonylong Ko phải assmin

    thêm dòng
    PHP:
    $mail->SMTPDebug 4;
    phía dưới cái dòng
    PHP:
    $mail->IsSMTP(); 
    nó sẽ hiện thông báo lỗi rõ ràng hơn
  7. Dân Chơi Phố Mẹo

    Dân Chơi Phố Mẹo Mới đăng kí

    mình ấn button send sau khi confirm thì không có phản hồi gì xảy ra bạn à.
  8. banbaonylong

    banbaonylong Ko phải assmin

    PHP:
    $mail->SMTPAuth true;     // turn of SMTP authentication
                
    $mail->Username "zzzzzzzzzzzzzzzzzzzzzzzzzz@gmail.com";  // SMTP username
                
    $mail->Password "zzzzzzzzzzzzzzzzzzzzzzzzzz"// SMTP password
                
    $mail->Host "smtp.gmail.com";
                
    $mail->SMTPSecure 'ssl';
                
    $mail->Port 465;
    phần này sửa chưa? hiện tại google ko còn cho xài free nữa, chỉ xài STMP của chính cái host thôi
  9. Bảo Trần

    Bảo Trần Thành viên cấp 2

    Code:
     $contact_image_data = 'data:'.$file_type.';base64,'.$encoded_content;
    $datazz = substr($contact_image_data, strpos($contact_image_data, ","));
    //         
    $mail->AddStringAttachment(base64_decode($datazz), $file_name, 'base64', $file_type);
    
    Hướng dẫn em chèn đoạn này vô đâu thế anh.! banbaonylong em chưa code ajax khi nào
  10. banbaonylong

    banbaonylong Ko phải assmin

    có download source mà bạn, mở lên coi thử đi nhé
Từ khóa:

Ủng hộ diễn đàn