جافاسكريبت - كيف تقوم بعمل استدعاء تابع في Jquery بعد إرسال النموذج؟

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>

الإجابة رقم 3

ستضطر إلى القيام بالأشياء يدويًا باستخدام استدعاء AJAX إلى الخادم. سيتطلب منك هذا أيضًا تجاوز النموذج.

لكن لا تقلق، الأمر سهل جدًا. إليك نظرة عامة حول كيفية التعامل مع استمارتك:

• تجاوز إجراء الإرسال الافتراضي (بفضل كائن الحدث الممرر، الذي يحتوي على طريقة preventDefault)
• احصل على جميع القيم اللازمة من النموذج
• إرسال طلب HTTP
• التعامل مع الرد على الطلب

أولاً، سيتعين عليك إلغاء إجراء إرسال النموذج كما يلي:

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

ثم، احصل على قيمة البيانات. لنفترض فقط أن لديك مربع نص واحد.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

ثم أطلق طلبًا. لنفترض فقط أنه طلب POST.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

ويجب أن يكون هذا كافيًا تقريبًا.

ملاحظة 2: لتحليل بيانات النموذج، يُفضل أن تستخدم إضافة. سيسهّل ذلك حياتك بشكل كبير، بالإضافة إلى أنه يوفر دلالة جميلة تحاكي إجراء إرسال النموذج الفعلي.

ملاحظة 2: لست مضطراً لاستخدام defers. إنه مجرد تفضيل شخصي. يمكنك بالمثل القيام بما يلي، ومن المفترض أن يعمل أيضاً.

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

الإجابة رقم 4

بالنسبة لـ MVC، كان هناك نهج أسهل حتى. تحتاج إلى استخدام نموذج Ajax وتعيين خيارات Ajax

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

إليك كود الإرسال، هذا في قسم جاهز المستند ويربط حدث النقر على الزر لإرسال النموذج

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

إليك الاستدعاء المرجعي في خيارات Ajax

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

في طريقة المتحكم في MVC يبدو الأمر هكذا

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}