2. 程式人生 > >使用jQuery重用form表單並非同步提交到其他action

使用jQuery重用form表單並非同步提交到其他action

阿新 • • 發佈：2019-01-12
在做頁面開發的時候，有時候要重用表單的資料，並非同步請求提交到其他的連結中，這個時候就可以使用jquery去修改表單的action值（記得使用後修改回來），並呼叫submit方法，當然後臺的連結action或者controller方法必須返回值型別為void，否則將發生頁面跳轉，返回null則顯示空白頁，無法實現非同步呼叫。另外，這裡可以使用另外一個方式提交，將表單序列化，然後用jQuery的ajax提交，不過要對返回的資訊進行處理。 直接上程式碼： （1）jQuery改變form屬性 
 $(".exportBrandSort").on('click', function() {
    	
    	 var url = contextPath+"/brand/exportBrandSort";
    	 $('#searchform').attr('action', url);
    	 $('#searchform').submit();
    	 //還原action值
    	 url = contextPath+"/brand/getBrand";
    	 $('#searchform').attr('action', url);
   
    });

（2）Ajax提交方式 
$(".exportBrandSort").on('click', function() {
    	
    	 var url = contextPath+"/brand/exportBrandSort";
    	 var data= $('#searchform').serialize();
    	
    		$.ajax({
    			  type: 'GET',
    			  url: url,
    			  data: data,
    			  success:function(retJson){
    		
    			  }
    		});
    });


相關推薦

使用jQuery重用form表單並非同步提交到其他action

在做頁面開發的時候，有時候要重用表單的資料，並非同步請求提交到其他的連結中，這個時候就可以使用jquery去修改表單的action值（記得使用後修改回來），並呼叫submit方法，當然後臺的連結action或者controller方法必須返回值型別為void，否則將發生頁面

form表單Get方式提交時,action中帶引數傳遞不了

form表單get方式提交時,action中帶引數傳遞不了 樣例： <form action="getPostServlet/getPost.do?param4=param4" method="get"> <input type="hidden" name="p

Jquery將form表單提交的資料分裝成json資料格式

form表單 <form id="damageSearchForm"> 銷燬日期：&nbsp;<input name="beginDate" id="beginDatine" type="text" class="easyui-datebo

jQuery控制form表單提交無效

$(form).submit() 無效 檢視form表單內部 是否有submit屬性的button 如果有的話 jQuery是無法提交表單的 嘗試改成type='button' 用onclick

jQuery改變form表單的action，並進行提交

<s:form action="/student/traScore.action?method=list" id="queryForm" name="queryForm"> </s

jquery實現form表單提交後區域性重新整理頁面的多種方法

最近做一個小專案，剛好需要用到搜尋功能，實現搜尋框內輸入資料然後按回車或者點選“提交”，然後給後臺資料庫處理並返回資料給前端，在前端區域性更新資料。 比如這樣的：但是遇到了一個小問題，就是form表單下任意輸入框輸入完按回車提交，整個頁面都會重新整理，就算我用ajax從後臺取

jQuery操作Form表單元素

selected 中文 table find fadein spa dsm 字符串 獲取 Web開發中常常須要操作表單，form表單元素有select、checkbox、radio、textarea、button、file、text、hidden、pas

jQuery實現form表單序列化轉換為json對象功能示例

bubuko ret FN RR inpu info images serialize orm <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

一個按鈕提交兩個form表單，分別提交到兩個action裡，第一個form的資料丟失

--背景 在一個iframe開啟的窗口裡，有兩個需要提交的form，而且需要提交到不同的兩個action裡，正常操作下丟失第一個form的資料 --解決方法 在這兩個form下新增一個新的iframe標籤<iframe id = "這個id要與這個視窗的iframe的id不同"&g

JQuery修改form表單action路徑

今天做form表單提交很煩一直修改$("#xxxx").action="xxxx.action"一直不對，後來找到了這篇文章，由此 轉發一下，幫助更多遇到這個問題的人。 ------------ 1.通常我們想到是使用$("#xxxx").action="xxxx.action";//但

Jquery之Form表單儲存位元組流圖片

最終效果，點選文字框後彈出檔案瀏覽框，選擇圖片檔案（會驗證），上傳伺服器成功（這裡用的MongoDB）後會返回一個路徑值，自動填入文字框中 部分JSP頁面  <form id="companyForm" method="post"> <input i

jquery-獲取form表單中的所有資料列表

<script> $(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); $.each(t, function() {

jquery將form表單內容轉換為json字串

  var formObject = {}; var formArray = $("#form").serializeArray(); $.each(formArray, function (i, item) { formObject[item.name] = item.val

使用FormData對包含檔案型別的form表單進行非同步提交（檔案上傳）並配置回撥

直接使用form表單的submit提交按鈕進行表單提交到action，這個是非非同步的，不但在action返回時需要重新整理頁面或跳轉至另外一個頁面，也不能配置回撥函式對返回資料進行某些處理。 其次，如果使用表單的serialize()方法進行ajax提交，則只能傳遞簡單

form表單防止重複提交的方法

會引起表單重複提交的情況：f5重新整理頁面, 點選瀏覽器後退，重複點選提交按鈕前臺：1. 提交後按鈕置灰，或者新增蒙板2. PRG模式，表單提交後，redirect到一個倒計時頁面，或者資訊提示頁面，等有成功資訊返回後，再跳轉回之前頁面。3. js中設定標記為判斷後臺：1 s

基於Bootstrap+jQuery.validate Form表單驗證實踐

<!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title> <meta charset="utf-8" />

springMVC實現form表單資料+檔案提交

說明： 1、SpringMVC實現檔案上傳，需要再新增兩個jar包。一個是檔案上傳的jar包，一個是其所依賴的IO包。這兩個jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar Controller @Respon

防止form表單多次提交

點選提交按鈕兩次。點選重新整理按鈕。使用瀏覽器後退按鈕重複之前的操作，導致重複提交表單。使用瀏覽器歷史記錄重複提交表單。瀏覽器重複的HTTP請求。使用者提交表單時可能因為網速的原因，或者網頁被惡意重新整理，致使同一條記錄重複插入到資料庫中，這是一個比較棘手的問題。我們可以從客

jquery實現form表單的submit和reset

<form id="formId" action=""> <input type="reset" style="display:none"> <div onclick="

form表單點選提交按鈕後 不重新整理頁面

<form id="user"> <button id="search" onclick="save()" >儲存</button> </form> function save(){ $.post("寫入