ارسال اطلاعات فرم به سمت سرور توسط Ajax

ارسال اطلاعات فرم به سمت سرور توسط Ajax

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

• استفاده از متد serialize

اولین روشی که شما می تونید اطلاعات فرم خودتون رو به سمت سرور ارسال کنید استفاده از متد Serilizث در جی کوئری هست. دقت کنید که این متد هیچ گونه آرگومانی برای ارسال به سمت سرور قبول نمی کنه.

در ادامه یک مثال برای استفاده از این متد میبینیم. فرض می کنیم که دقیقا همون تگ form کدهایی که شما در متن سوال نوشتید وجود داره. حالا میخوایم ببینیم که چجوری میتونیم توسط ایجکس این فرم رو به سمت سرور ارسال کنیم :

<script>
    $("#frmcreateQuestion").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("ActionName", "ControllerName")',
            data: $('#frmcreateQuestion').serialize()
        }).done(function (res) {
            if (res.status === 'success') {
               //عملیات موفق بود
            }
            else if (res.status === 'faild') {
               //عملیات ناموفق بود
            }
        });
    });
</script>

خب در این مثال وقتی فرم submit میشه این اسکریپت اجرا میشه و کلیه input ها و select های موجود در form رو به سمت سرور ارسال میکنه. در این روش فقط المان های درون فرم به سمت سرور ارسال میشه.

دریافت مقادیر ارسال شده توسط ایجکس در کنترلر

خب بعد از اینکه اطلاعات رو توسط جی کوئری ایجکس و توسط متد serialize به سمت کنترلر ارسال کردیم در سمت سرور باید اطلاعات را دریافت کنیم. دریافت اطلاعات بسیار ساده می باشد:

public class ControllerName : Controller
{
    [HttpPost]
     public IActionResult ActionName(Model model)
     {
        //عملیاتی دلخواه روی مدل انجام می شود
        return View();
     }
}

• ارسال مقادیر فرم توسط Variable

اما روش دیگری که برای اطسال اطلاعات form به سمت سرور هست اینه که تک تک مقادیر موجود در form در متغیرهایی ذخیره بشه و بعد توسط خاصیت data به سمت سرور ارسال بشه. در ادامه یک مثال میبینیم :

<script>
    $("#btnsubmit").on('click', function (e) {
        e.preventDefault();

        var title = $("#Title").val();
        var groupid = $(#GroupID).val();
        var content = $('#Content').val();
        
        $.ajax({
            type: 'POST',
            url: '@Url.Action("ActionName", "ControllerName")',
            data: {Title : title, GroupId = groupid, Content = content},
        }).done(function (res) {
            if (res.status === 'success') {
               //عملیات موفق بود
            }
            else if (res.status === 'faild') {
               //عملیات ناموفق بود
            }
        });
    });
</script>

خب در سمت سرور هم میشه به روشی که قبلا برای کار با serialize گفته شده مقادیر رو دریافت کرد. اما میشه به صورت مستقیم هم مقادیر رو دریافت کرد که این روش رو هم در ادامه با هم میبینیم :

public class ControllerName : Controller
{
    [HttpPost]
     public IActionResult ActionName(string Title, string Content, int GroupID)
     {
        //عملیاتی دلخواه روی مدل انجام می شود
        return View();
     }
}

• ارسال اطلاعات form توسط ایجکس توسط متد FormData

یک روش دیگه هم برای ارسال اطلاعات form به سمت سرور وجود داره و اون هم استفاده از FormData هست. این روش معمولا زمانی کاربرد داره که بخوایم فایل یا عکسی رو هم به سمت سرور ارسال کنیم.

برای استفاده از این روش میتونید مثال زیر رو به عنوان یک سمپل ببینید

    <script>
        var UploadImage = function () {
            var data = new FormData;
            var file = $("#myfiles").get(0);
            var files = file.files;

            for (var i = 0; i < files.length; i++) {
                data.append('files', files[i]);
            }

            $.ajax({
                type: "post",
                url: '@Url.Action("ActionName","ControllerName")',
                data: data,
                contentType: false,
                processData: false,
            }).done(function (result) {
                if (result.status == "success") {
                        //عملیات موفق
                    }
                }).fail(function (result) {
                       //عملیات ناموفق

                    }
                });
        }
    </script>

دقت کنید که در اینجا myfiles نام input ما می باشد که فایل یا تصویر را دریافت می کند.

روش های دیگه ای هم برای ارسال اطلاعات فرم به سمت کنترلر یا سرور وجود داره. مثلا ارسال آرایه به سمت سرور و ...