استفاده از jQuery برای ارسال ایمیل با وب سرویس

استفاده از jQuery برای ارسال ایمیل با وب سرویس

خرداد ۱۰, ۱۳۹۷ 0 By حسن شجاعی

قبل از هر چیز باید دو نکته را در نظر داشت:

  1. جی کوئری(jQuery) یک کتابخانه جاوااسکریپت است که برای ساده سازی نوشتن اسکریپت های سمت کلاینت  یا front-end طراحی شده است
  2. ارسال ایمیل مربوط به سمت سرور یا back-end می شود. بنابراین نیاز به ارتباط با سرور داریم تا بتوان ایمیل را ارسال کرد

از دو نکته فوق معلوم می شود که jQuery نمی تواند به تنهایی ایمیل ارسال کند. چگونه jQuery می تواند از سرور کمک بگیرد؟ jQuery با استفاده از یک متد AJAX Post می تواند با سرور ارتباط برقرار کرده، چیزی را ارسال و دریافت کند. برای ارسال ایمیل در سمت سرور می توان از یک وب سرویس .NET استفاده کرد.

بنابراین کارهای موردنیاز برای ارسال ایمیل با کمک یک وب سرویس از قبل آماده شده و با کمک jQuery برای استفاده از آن وب سرویس شامل مراحل زیر است:

  1. اعتبارسنجی داده های وارد شده در فرم
  2. ارسال داده ها به وب سرویس
  3. تفسیر و نمایش نتایج برگشتی از وب سرویس

اعتبارسنجی داده های وارد شده در فرم

jQuery یک پلاگین اعتبارسنجی بسیار عالی به نام jQuery Validate دارد که استفاده از آن بسیار ساده است. برای استفاده از این پلاگین تنها کافیست کلاس css فیلدهای فرم را کلاس required انتخاب کنید و در تابع  l $(document).ready l دستور l$(“emailform”).validate()l را فراخوانی کنید. هیچ کد اضافه ای برای اعتبارسنجی نیاز نیست و بقیه کار از جمله اینکه آیا آدرس ایمیل به درستی وارد شده است یا خیر را به پلاگین بسپارید!

بنابراین یک نمونه از کدی که می توان نوشت به صورت زیر است:

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”http://jzaefferer.github.com/jquery-validation/jquery.validate.js”></script>
<style type=”text/css”>
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$(“#commentForm”).validate();
});
</script></head>
<body><form class=”cmxform” id=”commentForm” method=”get” action=””>
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for=”cname”>Name</label>
<em>*</em><input id=”cname” name=”name” size=”25″ class=”required” minlength=”2″ />
</p>
<p>
<label for=”cemail”>E-Mail</label>
<em>*</em><input id=”cemail” name=”email” size=”25″ class=”required email” />
</p>
<p>
<label for=”curl”>URL</label>
<em> </em><input id=”curl” name=”url” size=”25″ class=”url” value=”” />
</p>
<p>
<label for=”ccomment”>Your comment</label>
<em>*</em><textarea id=”ccomment” name=”comment” cols=”22″ class=”required”></textarea>
</p>
<p>
<input class=”submit” type=”submit” value=”Submit”/>
</p>
</fieldset>
</form>
</body>
</html>

ارسال داده ها به وب سرویس

برای ارسال داده ها به وب سرویس در jQuery از متد  l $.ajax l و شیوه POST استفاده می کنیم. چارچوب کلی کد مورد استفاده به صورت زیر است:

$.ajax({
type: ‘POST’,
url: url,
data: data,
success: success,
dataType: dataType
});

 

ولی برای ارسال ایمیل باید این این چارچوب کلی را اندکی تغییر دهیم که به صورت زیر تبدیل خواهد شد:

$.ajax({
type: “POST”,
url: “/services/Mail.asmx/SendMail”,
cache: false,
contentType: “application/json; charset=utf-8”,
data: “{ ‘body’:'” + messageBody + “‘,” +
“‘to’: ‘” + msgTo + “‘,” +
“‘from’: ‘” + msgFrom + “‘,” +
“‘subject’: ” + msgSubject + “‘” +
“}”,
dataType: “json”,
complete: function (transport) { if (transport.status == 200) $(“#formcontainer”).html(“Success”); else alert(“Please try again later”); }
});

در کد فوق برای type عبارت post انتخاب شده است و این بدان معنی است که میخواهیم برای ارسال داده ها به سرور از شیوه HTTP POST استفاده کنیم.

در قسمت url باید آدرس مربوط به متد سرویس را قرار داد. چون میخواهیم از وب سرویس ASP.NET استفاده کنیم بنابراین عبارتی به صورت servicepage.asmx/webmethodname در این قسمت قرار می گیرد.

cache برابر false  قرار گرفته است و بدان معنی است که میخواهیم هربار داده های جدید فرم ارسال شود.

contentType نوع ارتباطات با سرور را مشخص می کند. دو نوع شیوه ارتباطی SOAP و JSON قابل انتخاب است.

data جایی است که پارامترها به وب سرویس ارسال می شود. در کد فوق چون از شیوه JSON استفاده شده است باید پارامترها با فرمتی به صورت زیر مقداردهی شوند:

{ ‘variable1′:’value1′,’variable2′,’value2′}

complete رویدادی است که به هنگام خاتمه کار اتفاق می افتد و کد نوشته شده در این قسمت اجرا خواهد شد.

تفسیر و نمایش نتایج برگشتی از وب سرویس

اگر بخواهیم در مرورگرهای مختلف از اجرای موفقیت آمیز یا همراه با خطای متد مطمئن شویم تنها راه استفاده از رویداد complete و چک کردن وضعیت HTTP بعد از اجرای وب سرویس است. اگر  transport.status برابر ۲۰۰ باشد یعنی با موفقیت به انجام رسیده است.

 

پ.ن: یک دمو از اجرای کد در آدرس http://jsfiddle.net/aM7PR/55 قرار دارد.

 

منبع:

Using jQuery to Send Email with Web Services