快捷導(dǎo)航

jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例

更新時(shí)間：2019年05月27日 11:18:35 作者：yihaomen

這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法,結(jié)合實(shí)例形式分析了jQuery form表單創(chuàng)建與提交相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法。分享給大家供大家參考，具體如下：

有時(shí)候在寫(xiě)web 應(yīng)用的時(shí)候，需要臨時(shí)動(dòng)態(tài)構(gòu)造一個(gè)form 并提交，form 里面的參數(shù)以及action,以及是post請(qǐng)求還是get請(qǐng)求，甚至form 的樣式都是可以指定的，用原生的javascript 肯定可以做到，我用jquery做了一個(gè)測(cè)試。

我自己測(cè)試的是構(gòu)造一個(gè)分頁(yè)的post請(qǐng)求, 為了防止csrf 攻擊，加入了csrf 驗(yàn)證，不需要的可以去掉.

function genSearchObj(url,page,pageSize,keyword){
  var params = {};
  params.url = url;
  params.page = page;
  params.pageSize = pageSize;
  params.cond = keyword;
  return params;
}
function mockFormSubmit(params){
  var form = $('<form />', {action : params.url, method:"post", style:"display:none;"}).appendTo('body');
  $.each(params, function(k, v) {
     if ( k != "url" ){
       form.append('<input type="hidden" name="' + k +'" value="' + v +'" />');
     }
  });
  form.append('<input type="hidden" name="csrfToken" value="' + $("#csrf_token").val() + '" />' );
  form.submit();
}

這樣就動(dòng)態(tài)構(gòu)造了一個(gè)form ,并提交。

附：js動(dòng)態(tài)創(chuàng)建Form表單并提交的方法

var dlform = document.createElement('form');
dlform.style = "display:none;";
dlform.method = 'post';
dlform.action = '../fileServlet';
dlform.target = 'callBackTarget';
var hdnFilePath = document.createElement('input');
hdnFilePath.type = 'hidden';
hdnFilePath.name = 'filePath';
hdnFilePath.value = filePath;
dlform.appendChild(hdnFilePath);
document.body.appendChild(dlform);
dlform.submit();
document.body.removeChild(dlform);

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

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

您可能感興趣的文章:

相關(guān)文章

淺談jQuery中的$.extend方法來(lái)擴(kuò)展JSON對(duì)象
下面小編就為大家?guī)?lái)一篇淺談jQuery中的$.extend方法來(lái)擴(kuò)展JSON對(duì)象。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè)
這篇文章主要為大家分享了一份全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè)，幫助大家更好的進(jìn)行jquery開(kāi)發(fā)，感興趣的小伙伴們可以參考一下
2016-02-02
詳解jquery事件delegate(）的使用方法
這篇文章主要詳解了jquery事件delegate(）的使用方法，delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果,實(shí)例分析了animate方法實(shí)現(xiàn)動(dòng)畫(huà)效果的相關(guān)技巧,并備有較為詳盡的注釋供讀者學(xué)習(xí)參考,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
jQuery防止重復(fù)綁定事件的解決方法
這篇文章主要介紹了jQuery防止重復(fù)綁定事件的解決方法,結(jié)合實(shí)例形式分析了jQuery的重復(fù)綁定問(wèn)題與相應(yīng)的解決方法,需要的朋友可以參考下
2016-05-05
jQuery學(xué)習(xí)心得總結(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇jQuery學(xué)習(xí)心得總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
JQuery radio（單選按鈕）操作方法匯總
這篇文章主要介紹了JQuery radio（單選按鈕）操作方法匯總,本文講解了獲取選中值、設(shè)置選中值、根據(jù)Value值設(shè)置選中、刪除Radio、遍歷等內(nèi)容,需要的朋友可以參考下
2015-04-04
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)拖放商品放置購(gòu)物車(chē)
這篇文章主要幫助大家輕松學(xué)習(xí)EasyUI實(shí)現(xiàn)拖放商品放置購(gòu)物車(chē)的功能，購(gòu)物籃中的物品和價(jià)格也將進(jìn)行更新，感興趣的小伙伴們可以參考一下
2015-11-11
基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示
近期有項(xiàng)目需求是這樣的，需要根據(jù)用戶(hù)選擇的選項(xiàng)給出相應(yīng)的提示，本文給大家介紹基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示，對(duì)jquery復(fù)選框是否選中相關(guān)知識(shí)感興趣的朋友一起看看吧
2015-12-12
jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-01-01