1. 程式人生 > >extjs4 表單提交 和 Ajax請求 示例

extjs4 表單提交 和 Ajax請求 示例

表單的提交form.submit和Ajax請求裡的success和failure回撥函式有點區別,

表單提交後要求後臺返回的必須是json字串,且必須包含success:true 或 success:false,如果不包含這個直接返回一個json字串就會執行failure函式,這個鬱悶我一下午……

Ajax請求則不同,只要後臺返回一個字串就能成功接收到

表單提交(這裡我就直接寫handler了)

		handler : function() {
					var form = me.down('form').getForm();
					if (form.isValid()) {
						form.submit({
							url : 'http://localhost:8080/b_springmvc_extjs/formSubmit.do',
							method : 'POST',
							waitTitle : "提示",
							waitMsg : '正在提交資料,請稍後 ……',
							success : function(form, action) {
								Ext.Msg.alert('success', 'bbb  ' + form
												+ action.result.msg);
								this.close();
							},
							failure : function(form, action) {
								Ext.Msg.alert('failure', 'bbb' + form
												+ action.result.msg);
								this.close();
							}
						});
					}
				}

後臺
	@RequestMapping(value = "/formSubmit.do", method = RequestMethod.POST)
	@ResponseBody
	public String formSubmit(@ModelAttribute(value = "user") User user) {
		if (user != null || !equals("")) {
			System.out.println(user.getId());
			System.out.println(user.getFirstname());
			System.out.println(user.getLastname());
			try {
				Thread.sleep(1000 * 2);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			return "{success:true,msg:'success submit --- yang'}";
		}
		return "{success:false,msg:'failure submit --- xuan'}";
	}



然後是Ajax請求,這裡我是監聽一個combo的focus事件(mvc模式)
'frameNorth combo[id=changeSkin]' : {
						focus : this.comboFocus
				}
comboFocus : function(combo, The, eOpts) {		
		Ext.Ajax.request({	//ajax request test
					url : 'http://localhost:8080/b_springmvc_extjs/ajaxRequest.do',
					 /*  headers: {
					       'userHeader': 'userMsg'
					   },*/
					params : {
						name : 'yangxuan'
					},
					method : 'POST',
					success : function(response, options) {
						Ext.MessageBox.alert('成功', '服務端返回資料 : '+ response.responseText);
					},
					failure : function(response, options) {
						Ext.MessageBox.alert('失敗', '錯誤編號:' + response.status);
					}
				});
	},

後臺
@RequestMapping(value = "ajaxRequest.do", method = RequestMethod.POST)
	@ResponseBody
	public String ajaxRequest(@RequestParam(value = "name") String name) {
		if (name != null || !name.equals("")) {
			System.out.println("name : " + name);
			return "success ajax request";
		}
		return "fail ajax request";
	}


相關推薦

extjs4 提交 Ajax請求 示例

表單的提交form.submit和Ajax請求裡的success和failure回撥函式有點區別, 表單提交後要求後臺返回的必須是json字串,且必須包含success:true 或 success:false,如果不包含這個直接返回一個json字串就會執行failure函

虛擬提交模擬ajax請求

前端開發人員經常會遇到ajax請求出現跨域問題,比如做單點登入。結合本人開發經驗推薦一方法——虛擬表單提交,解決此類問題。此方法的特點是簡單易懂!好了,直接上乾貨! function formCommit(){ var formobj; // window.top.open(

form提交ajax提交

         相信大家在做itoo的時候都用過ajax非同步提交資料,好處自然不言而喻,資料提交頁面不會閃屏;頁面區域性更新速度快;網路頻寬佔用低。而表單提交則整個頁面重繪。如果表單提交後跳轉到另

Extjs6關於Ajaxform提交以及store請求session超時的處理方法

對於Store的處理 每個store配置的時候,配上load監聽,載入時處理: usrStore : { model : 'App.model.Usr', autoLoad :

jquery ajax 實現提交驗證

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <title>$.ajax()方法傳送請

轉載:關於ajax,form提交,http請求提交的區別

https://www.cnblogs.com/lidgblogs/archive/2017/09/01/7403828.htmlajax模仿form上傳:<!doctype html> <html lang="en"> <head>

java post請求提交json提交簡單小結

在java實現http請求時有分為多種引數的傳遞方式,以下給出通過form表單提交和json提交的引數傳遞方式: 1 public String POST_FORM(String url, Map<String,String> map,String encoding) throws Pa

FORM請求和AJAX請求使用適用場景

最常使用的兩種資訊提交處理方式 第一種:表單提交FORM Submit 方式 FROM提交是我們經常適用的向後臺提交資料的一種方式,Form Tag 適用方法 參考: <form action="form_action.asp" method="

form提交Ajax常用版區別聯絡。

使用Ajax方法實現form表單的提交 1.區別 聯絡 在使用form表單的時候,一旦點選提交觸發submit事件,一般會使得頁面跳轉,頁面間的跳轉等行為的控制權往往在後端的控制層,後端會控制頁面的跳轉及資料傳遞。 但是當不希望頁面跳轉或者是想要將控制權放

form提交轉為ajax方式提交

clas modal 通過 fault IT pre submit sub 方式 <form action="xxx" method="get"> //action的值是請求的url地址 <div class="form-group">

form提交ajax提交的區別

原文地址:https://blog.csdn.net/yao302789/article/details/50954902 Ajax提交是通過js來提交請求,請求與響應均由js引擎來處理,頁面不會重新整理,用 戶感覺不到實際上瀏覽器發出了請求。比如說我們希望網頁總是顯示最新的新聞, 而又不想老是

element-UI提交多餘欄位無法插入問題

表單: <el-form :model="site" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="酷站

servlet3.0以上form提交ajax非同步提交

一、普通form提交 1、jsp <form id="form" method="post" name="upload" enctype="multipart/form-data" action="/index.do"> <input type=

解決HttpClient工具中application/x-www-form-urlencoded提交時,請求引數中文亂碼問題

一、引數亂碼現象 當我去請求第三方介面時,介面接收格式為Form表單的時候,使用HttpClient工具類。這時,對於封裝進HttpPost物件裡的請求引數,如果有中文引數,會出現亂碼的現象。 二、程式碼現象復現 controller層 @RestContr

bootstrap兩種按鈕寫法 button a, 可用於提交a不同按鈕連結跳轉

如果一個頁面有兩個處理按鈕,跳轉不同業務,可以用以下方法 <button type="submit" class="btn btn-primary">修改專案</button>     (轉向from提交的地址 <a class="bt

微信小程式中form 提交取值例項詳解

我們知道,如果我們直接給 input 新增 bindinput,比如:<input bindinput="onUsernameInput" />,那麼可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e)

jQuery提交後臺互動

要求:僅使用jQuery提交表單和後臺互動,不使用基於jQuery的表單外掛方式1、取到頁面控制元件的值後拼接放在data中,傳遞到後臺頁面程式碼:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

Thymeleaf的普通提交AJAX提交

為Java實體物件新增後臺校驗註解: //String型別的校驗: @NotEmpty -- 不能為空 max=16 -- 最大長度為16 @NotEmpty(message = "songName不能為空") @Size(ma

JSP提交校驗

function validate_channel_info(channelform) { if(channelform.channelname.value=="")

提交json提交

背景在前後端分離的開發組中,前端通常對自己程式碼組織的比較細緻,都會對AJAX,或者小程式API做封裝。而很多前端開發對後端介面要求的傳參 一頭霧水,後端開發人員對HTTP一知半解,傳參接收不到,說不清楚,互相推脫,誰誰應該改傳參方式。HTTP協議中:Content-Type