آخرین مطالب
امکانات وب
برای ساخت فرم تماس با ما به زبان PHP و تکنولوژی Ajax بهتر است با ساخت فرم تماس ساده به زبان PHP آشنا باشید. قبلا در دسخطی به صورت مستقل و کامل ساخت فرم تماس با ما آموزش داده شده است که میتوانید از این لینک مطالعه کنید: آموزش ساختن فرم تماس با ما
همانطور که میدانید برای ارسال محتویات فرم به اسکریپت پردازش گر ارسال ایمیل PHP ، بعد از کلیک بر روی دکمه ارسال، صفحه مرورگر برای ارسال اطلاعات و پردازش آن نیاز به بارگذاری مجدد داشت. یا به عبارتی صفحه فرم تماس با ما دوباره بارگذاری میشد تا نتیجه عملیات نمایش داده شود. از آنجایی که کاربران سایت تمایل زیادی برای بارگذاری اجباری و مجدد یک صفحه ندارند (به علتهای مختلف مانند کم بودن سرعت اینترنت یا مصرف پهنای باند و …) استفاده از روشی که باعث بارگذاری مجدد صفحه تماس با ما نشود، هم منطقی و هم کاربر پسندتر است و تجربه مثبتی در ذهن کاربر ایجاد میکند.
برای ساخت فرم تماس با ما با تکنولوژی Ajax ما از فریم ورک JQuery استفاده میکنیم. در این فرم از ۲ فایل به ترتیب زیر استفاده شده است:
- فایل contactform.html
- فایل sendemail.php
در زیر کدهای مربوط به فرم را ملاحظه میکنید که در فایل contactform.html قرار خواهد گرفت :
<form id="contactform" action="" method="post"> <label>Name:</label><input id="name" type="text" name="name" /> <label>Email:</label><input id="email" type="text" name="email" /> <label>Message:</label><textarea id="message" name="message"></textarea> <input id="submit" type="button" value="send" /> <div id="success" style="color: red;"></div> </form> |
تا اینجای کار تنها تفاوت با فرم تماس با ما ساده، فیلد input مربوط به دکه ارسال هست که به جای نوع submit از نوع button استفاده شده و یک id تخصیص داده شده است. این امر به این دلیل هست که هنگام کلیک بر روی دکمه ارسال صفحه به صورت خودکار شروع به ارسال و بارگذاری مجدد صفحه نکند تا ما بتوانیم از دستورات JQuery بهره ببریم.
در زیر کدهای مربوط به فایل sendemail.php را مشاهده میکنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Here we get all the information from the fields sent over by the form. $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $subject = 'the subject'; $message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message; if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address mail($to, $subject, $message, $headers); //This method sends the mail. echo "Your email was sent!"; // success message }else{ echo "Invalid Email, please provide an correct email."; } |
همانطور که متوجه شدید هیچ فرقی با فرم ارسال ایمیل ساده ندارد و فقط در انتها نتیجه عملیات را چاپ میکند.
کدهای مربوط به عملیات JQuery به صورت زیر است:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { $('#submit').click(function() { $('#submit').attr('value', 'Please wait...'); $.post("sendemail.php", $("#contactform").serialize(), function(response) { $('#success').html(response); $('#submit').attr('value', 'SEND'); }); retu false; }); }); |
کد بالا کلیک بر روی دکمه ارسال را تشخیص داده و اطلاعات فرم را به صورت تکنولوژی Ajax به فایل PHP مربوط ارسال کرده و نتیجه HTML چاپ شده در فایل PHP را در داخل تگ با id با نام success نمایش میدهد. فراموش نکنید که برای اجرای کدهای JQuery نیاز به بارگذاری آن بخش head صفحه فرم تماس با ما دارید.
به صورت کلی فایل contactform.html به صورت زیر خواهد بود:
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 | <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $('#submit').click(function() { $('#submit').attr('value', 'Please wait...'); $.post("sendemail.php", $("#contactform").serialize(), function(response) { $('#success').html(response); $('#submit').attr('value', 'SEND'); }); retu false; }); }); </script> </head> <body> <form id="contactform" action="" method="post"> <label>Name:</label><input id="name" type="text" name="name" /> <label>Email:</label><input id="email" type="text" name="email" /> <label>Message:</label><textarea id="message" name="message"></textarea> <input id="submit" type="button" value="send" /> <div id="success" style="color: red;"></div> </form> </body> </html> |
اکنون شما یک فرم تماس با ما دارید که از تکنولوژی Ajax برای ارسال اطلاعات فرم به ایمیلتان استفاده میکند.
برگرفته از: teaching you
نویسنده: فؤاد طهماسبی
من فؤاد طهماسبی هستم. مهندسی نرم افزار خوندم و علاقه زیادی به برنامه نویسی تحت وب دارم. مطالبی که مینویسم یا ترجمه میکنم، اکثرا نکات یا مطالبی هست که زمانی خودم با اون مواجه شدم و مجبور شدم یاد بگیرم. امیدوارم که به درد شما هم بخوره!
دسخط های من
- - , .
آموزش دستک...برچسب : نویسنده : استخدام کار dastak بازدید : 147