怎么在jQuery中利用Ajax實現一個表單提交功能

這篇文章將為大家詳細講解有關怎么在jQuery中利用Ajax實現一個表單提交功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

一、準備

1、頁面引入jQuery文件

2、頁面引入jQuery的表單插件jQuery.form.js

二、實施

1、頁面中的表單

<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="提交" id="agreementSub">
    </div>
</form>

2、提交表單的代碼

$("#agreementSub").on("click",function(){
    $('#mainForm').ajaxSubmit( //ajax方式提交表單
      {
        url: '/personal/kaike',
        type: 'post',
        dataType: 'json',
        beforeSubmit: function () {},
        success: function (data) {
          if (data.Res == "True" || data.Res == true) {
            $('.jsrz_main_check').html('您的申請已提交，我們將會在1-2個工作日內進行審核，請耐心等待!');
          } else {
            alert(data.Msg);
          }
        },
        clearForm: false,//禁止清楚表單
        resetForm: false //禁止重置表單
      });
});

點擊提交按鈕觸發綁定的click事件。

$('#mainForm').ajaxSubmit()//中的代碼部分也可以封裝為一個方法，在其他地方調用。

三、不使用jQuery.from表單插件的方式

$("#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);
    }
  });
});

關于怎么在jQuery中利用Ajax實現一個表單提交功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。