extjs4 表单提交 和 Ajax请求 示例

时间:2023-02-09 23:37:26

表单的提交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'}";
}

extjs4 表单提交 和 Ajax请求 示例



然后是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请求 示例