jquery實現(xiàn)ajax提交表單信息的簡單方法(推薦)
最近在思考優(yōu)化項目,想自己擴展一個jquery自動獲取表單中的數(shù)據(jù)進行ajax提交。本人沒有完整性學(xué)習(xí)jquery,基本上是現(xiàn)學(xué)現(xiàn)找,有點困難。
主要是擴展和拼接json轉(zhuǎn)對象
很簡單,附上代碼:
; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后臺對象接收名稱 url: '/',//提交地址 postType: 'POST',//提交方式 dataType: 'JSON',//數(shù)據(jù)返回類型 async: false,//是否異步 optionObj: [],//自定義參數(shù) callback: function () { },//成功回調(diào) }; var options = $.extend(defaults, options);//合并參數(shù) if (options.url == '') { alert('請?zhí)顚懱峤坏刂?); return; } var postvals = {}; //textbox/隱藏域/textarea/radio選中值 $(this).find('input[type="text"],input[type="hidden"],textarea,input[type="radio"]:checked').each(function () { if ($(this).val() != undefined) { var name = $(this).attr('name'); if (name == undefined || name == '') { return false; } var value = $(this).val(); var json = '{"' + name + '":"' + value + '"}'; var obj = $.parseJSON(json); postvals = $.extend(postvals, obj); } }); var resObj; if (options.optionObj != undefined || options.optionObj!=[]) { resObj = $.extend(postvals,options.optionObj); } else { resObj = postvals; } $.ajax({ type: options.postType, dataType: options.dataType, data: resObj, async: options.async, url: options.url, success: function (json) { if (json.IsError) { alert(json.Message); } else { options.callback(); } } }); }; })(jQuery);
使用的話配合jquery validate使用
$("#system-form").validate({ rules: { SystemName: { required: true }, Description: { required: true, }, }, messages: { SystemName: { required: "請?zhí)顚懴到y(tǒng)名稱" }, Description: { required: "請?zhí)顚懴到y(tǒng)描述" } }, submitHandler: function(form) { var url = '/oa/system/' + $(form).attr('ftype'); $(form).ajaxForm({ url: url,modelname:'system', callback: function() { location.href = '/oa/system/index.html'; } }); } });
以上這篇jquery實現(xiàn)ajax提交表單信息的簡單方法(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jquery ajax異步提交表單數(shù)據(jù)的方法
- jQuery通過ajax快速批量提交表單數(shù)據(jù)
- jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
- jQuery ajax提交Form表單實例(附demo源碼)
- jQuery實現(xiàn)form表單基于ajax無刷新提交方法詳解
- jquery validate和jquery form 插件組合實現(xiàn)驗證表單后AJAX提交
- jquery ajax 如何向jsp提交表單數(shù)據(jù)
- jquery+ajax驗證不通過也提交表單問題處理
- 詳解jquery中$.ajax方法提交表單
- jQuery實現(xiàn)表單動態(tài)加減、ajax表單提交功能
相關(guān)文章
JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用示例
這篇文章主要介紹了JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用,結(jié)合實例形式分析了jQuery針對頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,并給出了購物車動畫效果案例進行總結(jié),需要的朋友可以參考下2019-05-05jquery isEmptyObject判斷是否為空對象的函數(shù)
jQuery 判斷一個對象是否為空是使用for name in obj 來遍歷對象中的屬性名.2011-02-02jQuery中hover與mouseover和mouseout的區(qū)別分析
這篇文章主要介紹了jQuery中hover與mouseover和mouseout的區(qū)別,結(jié)合實例分析了jQuery中hover與mouseover和mouseout的區(qū)別與使用技巧,需要的朋友可以參考下2015-12-12修復(fù)jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)
這篇文章主要介紹了如何修復(fù)jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)的相關(guān)資料,需要的朋友可以參考下2016-03-03jquery根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法
下面就為大家?guī)硪黄猨query根據(jù)td給相同tr下其他td賦值的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10