ارسال فرم با استفاده Ajax

بدون مقدمه ...

برای اینکه اطلاعات یک فرم را بدون رفرش صفحه ارسال کنیم از ایجکس استفاده می کنیم .

گام صفر : اضافه کردن کتابخانه جی کوئری

برای استفاده از Ajax ابتدا باید jquery در فوتر اضافه کنیم

<script type="application/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"/>

گام یک : تعریف id برای فرم مربوطه

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

برای فرم مورد نظر شناسه id تعریف می کنیم .

برای مثال : form1

<form id="form1" >
    <label>title</label>

    <input name="mha" id="mha">

    <input type="submit">
</form>

گام دوم: ارسال اطلاعات با ایجکس

کد های زیررا داخل تگ script قراردهید.

    $('#form1').submit(function (event) {
    event.preventDefault();    // غیرفعال سازی ارسال فرم به  صورت عادی
    $.ajax({
        url: "/Blog/Add",   
      type: "POST",   
     data:  $(this).serialize() ,  // اطلاعات فرم جاری 
        success: function (data) {
            alert(data);
        }

    });
    

خب کار تمام شد

ولی اگر بخواین اینکار برای چند فرم انجام بدید حجم کد هاتون زیاد میشه .

می توانید با استفاده از کد های زیر به راحتی چندین فرم را ایجکسی نمایید.

گام یک : کلاس مربوطه را به فرم اختصاص بدید.

مثلا کلاس : form_ajaxi

<form class="form_ajaxi" method="post" action="/Blog/Add" >

گام دوم : تگ script به کد های زیر تغییر بدید.

    $(function () {


            $('.form_ajaxi').submit(function (event) {

                event.preventDefault();

                $.ajax({
                    url: $(this).attr("action") ,
                  type:  $(this).attr("method"),
                    data:  $(this).serialize() ,
                    success: function (data) {
                        alert(data);
                    }

                });
        });
    });