در این مقاله ارسال اطلاعات به سرور با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);
}
جدیدترین ویدئوهای آموزشی
در بخش TV باگتو، آموزش های کوتاه و جدید را مشاهده نمایید
برای ارسال نظر باید وارد حساب کاربری خود شوید
ورود به حساب کاربری ثبت نام
خیلی عالی توضیح دادید ممنون.