快捷導(dǎo)航

jQuery基于Ajax方式提交表單功能示例

更新時(shí)間：2017年02月10日 08:46:05 作者：Mr-Robot

這篇文章主要介紹了jQuery基于Ajax方式提交表單功能,結(jié)合實(shí)例形式分析了jQuery使用ajax方式提交表單的具體步驟與常見操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery基于Ajax方式提交表單功能。分享給大家供大家參考，具體如下：

提交表單一般通過同步的方式提交，提交后頁面刷新或跳轉(zhuǎn)到新頁面來顯示服務(wù)器端返回的處理結(jié)果。如果表單提交后有另外的操作或業(yè)務(wù)需求需要還在這個(gè)頁面上顯示或處理，那么頁面不能整體刷新，這時(shí)第一想到的就是采用ajax的方式提交表單。下面完整的介紹一個(gè)表單采用ajax方式提交的流程。

一、準(zhǔn)備

1、頁面引入jQuery文件

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

二、實(shí)施

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個(gè)工作日內(nèi)進(jìn)行審核，請耐心等待!');
          } else {
            alert(data.Msg);
          }
        },
        clearForm: false,//禁止清楚表單
        resetForm: false //禁止重置表單
      });
});

點(diǎn)擊提交按鈕觸發(fā)綁定的click事件。

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

三、不使用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);
    }
  });
});

注：表單中必須有類型為submit的input按鈕，用來激活submit方法。此種提交方式只能提交表單中比較簡單的文本項(xiàng)，對于file類型的數(shù)據(jù)無法進(jìn)行提交。input提交按鈕的id和name屬性的值不能為submit，否則會造成沖突而無法提交表單。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: