Example of jQuery form submission function based on Ajax

In this paper, an example is given to describe the function of jQuery to submit forms based on Ajax. Share it for your reference, as follows:

Submit Form 1 is submitted synchronously. After submission, the page refreshes or jumps to a new page to display the processing results returned by the server. If there are other operations or business requirements that need to be displayed or processed on this page after the form is submitted, the page cannot be refreshed as a whole. At this time, the first thought is to submit the form by ajax. The following is a complete introduction to the process of submitting a form by ajax.

Step 1 Prepare

1. The page introduces jQuery file

2. The page introduces the form plug-in jQuery. form. js of jQuery

2. Implementation

1. Forms on the page

<form id="mainForm" method="post" enctype="multipart/form-data" class="jsrz_main_information">
   <input type="text" name="UserName" value="" />
   <div class="jsrz_main_button">
        <input type="submit" value=" Submit " id="agreementSub">
    </div>
</form>

2. Submit the form code

$("#agreementSub").on("click",function(){
    $('#mainForm').ajaxSubmit( //ajax Submit the form by 
      {
        url: '/personal/kaike',
        type: 'post',
        dataType: 'json',
        beforeSubmit: function () {},
        success: function (data) {
          if (data.Res == "True" || data.Res == true) {
            $('.jsrz_main_check').html(' Your application has been submitted, and we will send it to 1-2 Please wait patiently for the audit within 10 working days !');
          } else {
            alert(data.Msg);
          }
        },
        clearForm: false,// Prohibit clear forms 
        resetForm: false // Disable reset form 
      });
});

Clicking the Submit button triggers the bound click event.

$('#mainForm').ajaxSubmit()// The code section in can also be encapsulated as 1 Methods that are called elsewhere. 

3. Ways of not using the jQuery. from form plug-in

$("#maniForm").submit(function (envent)
{
  envent.preventDefault();
  var form = $(this);
  $.ajax({
    url: form.attr("action"),
    type: form.attr("mathod"),
    data: form.serialize(),
    dataType: "json",
    beforeSend: function ()
    {
      $("#ajax-loader").show();
    },
    error: function ()
    {
    },
    complete:function () {
      $("#ajax-loader").hide();
    },
    success: function (data)
    {
      $("#article").html(data);
    }
  });
});

Note: The form must have an input button of type submit to activate the submit method. This submission method can only submit relatively simple text items in the form, and cannot submit data of file type. The id and name properties of the input Submit button cannot have values of submit, otherwise a conflict will occur and the form cannot be submitted.

For more readers interested in jQuery related content, please check the topics on this site: "Summary of Ajax Usage in jquery", "Summary of json Data Skills in jQuery Operation", "Summary of jQuery form Operation Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Extension Skills", "Summary of jQuery Table (table) Operation Skills" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.