در این مقاله ارسال اطلاعات به سرور با ajax در jquery را آموزش می دهیم.در مقاله ی آموزش ajax با jquery با این تکنولوژی آشنا شدیم، اگر این مقاله را مطالعه نکرده اید حتما قبل از این بخش آن را مطالعه نمایید. در این آموزش ما یک صفحه ارسال دیدگاه همانند آن چیزی که از سایت باگتو در پایین همین مقاله مشاهده می کنید طراحی و پیاده سازی میکنیم.
ایجاد تگ های html
کد های زیر را برای ایجاد ساختار html مورد نیاز برای ارسال دیدگاه در یک سند html بنویسید.
<html>
<head>
<title>ارسال اطلاعات با ajax - باگتو</title>
</head>
<body>
<input type="text" placeholder="نام خود را وارد کنید" id="name">
<br><br>
<input type="email" placeholder="ایمیل خود را وارد کنید" id="email">
<br><br>
<textarea id="comment" placeholder="دیدگاه خود را بنویسید"></textarea>
<br><br>
<button id="btnSend">ارسال دیدگاه</button>
</body>
</html>
جمع آوری اطلاعات و ارسال با ajax
قبل از هر کاری ما نیاز داریم که کتابخانه jquery را به صفحه html اضافه کنیم تا بتوانیم از قابلیت ajax در jquery استفاده کنیم. کد زیر را در قسمت head سایت اضافه کنید.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>حالا که jquery به سند ما اضافه شد می توانیم اطلاعاتی که کاربر وارد کرده را جمع آوری کنیم به سمت سرور ارسال کنیم. کد زیر را در انتهای تگ body و یا در یک فایل js خارجی بنویسید.
<script>
$('#btnSend').click(function() {
var name = $('#name').val();
var email = $('#email').val();
var comment = $('#comment').val();
$.ajax({
type: 'POST',
url: '/comments/send"',
data: { name: name, email: email , comment:comment},
success: function() {
alert("ارسال اطلاعات با ajax با موفقیت انجام شد.")
}
});
});
</script>
در این کد همانطور که میبینید یک رویداد .click ایجاد کرده ایم. و این بدان معنی است که پس از کلیک بر روی تگی که id آن برابر با btnSend باشد این function اجرا می شود. سپس ما اطلاعات وارد شده در کادر های ورودی را با تشخیص id مربوط به هر کادر دریافت کرده ایم و در متغیر هایی با نام های name,email,comment ذخیره کرده ایم.
سپس متد ajax() از کتابخانه jquery را صدا زده ایم. این متد چهار پارامتر را از ما دریافت می کند:
- Type
- url
- data
- success
پارامتر type تعیین می کند که ما از Get یا POST برای ارسال اطلاعات با ajax می خواهیم استفاده کنیم که در این مثال ما با POST ارسال اطلاعات را انجام می دهیم.دقت داشته باشید action و یا... که در سمت بک اند نوشته شده است باید type یکسانی با کد ajax ما داشته باشد.
پارامتر url آدرسی که که قصد ارسال اطلاعات را به آن داریم مشخص می کند. که می تواند یک فایل php یا یک action در asp.net باشد.
در پارامتر data اطلاعاتی که قرار است ajax برای ما به سرور ارسال کند را مشخص می کنیم.
و در نهایت success که پس از انجام موفقیت آمیز درخواست ajax کدهای داخل این بلوک اجرا می شوند که ما در این مثال یک پیغام به کاربر نمایش داده ایم.
دریافت اطلاعات از ajax در php
در بک اند و سمت سرور با زبان php می توانیم با استفاده از دستور $_POST[] اطلاعاتی که توسط ajax ارسال شده است را دریافت کنیم.
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
دریافت اطلاعات از ajax در asp.net
در تکنولوژی asp.net نیز می توانیم یک action همانند کد زیر ایجاد کنیم که اطلاعات ارسال شده از سمت ajax را به عنوان پارامتر ورودی دریافت کند.
public IActionResult Send(string name,string email,string comment)
{
return Json(true);
}
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید