EXT--表单AJax提交后台,返回前端数据格式的转换
前言:
前端发送请求至服务端(Java),得到的数据是Java语言对象所表现的形式,经常需要转换为JSON格式的字符串写出至前端;当前端获取后也往往需要将字符串转换为js的对象。本文描述了在EXT作为前端框架,表单异步提交的情景下这些数据格式处理。当然,此类的格式转换方法有多种,本文仅描述其中一种而已。
说明:EXT版本:3.4
示例:
服务端相关代码
//创建SubTreeVo集合
List<SubTreeVo> treeVos = new ArrayList<SubTreeVo>();
if( topleveldomianList != null && !topleveldomianList.isEmpty() ) {
Iterator<Ttopleveldomian> it = topleveldomianList.keySet().iterator();
while ( it.hasNext() ) {
Ttopleveldomian key = it.next();
SubTreeVo vo = new SubTreeVo();
vo.setId(key.getiDomainId());//域名id
vo.setName(key.getsDomainName());//域名
vo.setUrl(key.getsDomainUrl());//域名地址
vo.setUri(topleveldomianList.get(key));//域名uri
treeVos.add(vo);
}
}
try {
jsonStr = JSONUtil.serialize(treeVos);
} catch (JSONException e) {
}
}//写出
out.write("{success:true,info:'上传成功',dataJson:'"+jsonStr+"'}");
//...
小结:JSONUtil为org.apache.struts2.json包下的一个类--需导struts2-json-plugin-2.3.15.1.jar,其serialize方法就是将Object转换为JSON字符串。
前端相关代码
importform.getForm().submit({
url : '/uploadFileWhiteName.do?action=channelDomainImport&channelId='+channelId,//调用的url资源
method : 'POST',//获取请求URL的HTTP
waitTitle : '请稍后',//在调用一个action的处理过程中调用的Ext.MessageBoxwait显示的标题
waitMsg : '系统正在处理 ...',//在调用一个action的处理过程中调用的Ext.MessageBoxwait显示的内容
/**
* 当接收到一个有效的成功返回的数据包的时候调用的回调函数。
* @form Ext.form.BasicForm 做出请求动作的表单
* @action Ext.form.Action The Action class.
*/
success : function(form, action) {
//获取服务器返回的数据--JSON字符串
var str = action.response.responseText;
//将JSON字符串解析成对象
var msg = Ext.util.JSON.decode(str);
//将JSON字符串解析为对象 (注:用Ext.util.JSON.decode也可以)
var jsObject = eval(msg.dataJson);
//...
小结:将JSON字符串转换为js对象有两种方式:一是用EXT的工具包的JSON类,其decode方法可将JSON字符串转换为js对象;二是调用javascript的eval方法,可将JSON字符串转换为js对象。不过调用eval方法需注意的是:如果为单对象,则需写成eval("("+data+")");的形式,具体参见我的另一篇博客:js--eval函数。
EXT--表单AJax提交后台,返回前端数据格式的转换的更多相关文章
- 解决layui表单ajax提交回调函数不起作用问题的两种方式
最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...
- 织梦自定义表单ajax提交范例
function add_ajaxmessage(){ var dh = document.getElementById("tel"); //表单验证 if($("#te ...
- 表单提交时上传图片 表单ajax提交
页面 <script type="text/javascript" src="js/jquery.form.js"></script>& ...
- 获取form表单默认提交的返回值
1.经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并 ...
- form表单ajax提交
这里下面有两种 第一种是form表单里面添加了数据,并且含有上传的图片,第二种是from表单中不含有图片 只有普通数据 第一种form表单中包含有图片的类型: <form method=&q ...
- input设置为disabled,表单无法提交后台解决方法
<input name="country" id="country" size=12 value="disabled提交时得不到该值 " ...
- 解决表单GET提交后台数据乱码问题
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/ForeverCjl/article/details/36180933 在页面上提交数据到s ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
随机推荐
- Oracle数据库对象_同义词
同义词是一种数据库对象,它是为一个数据库对象定义的别名,使用同义词的主要目的是为了简化SQL语句的书写. 同义词的概念和类型 利用同义词可以为用户的一个对象,或者其他用户的一个对象定义别名,从而简化命 ...
- highcharts 图表库的简单使用
Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...
- [Bootstrap]组件(三)
输入框组 添加额外元素.input-group-addon 外包元素.input-group>input-group-addon+form-control <div class=" ...
- tomcat中的get、post区别
最近做一个项目,前台传到后台的数据是乱码.看着代码应该是正确的,但是就是有问题,然后请教了旁边的老司机才找到问题是什么.话不多说,下面是模拟情景的代码,其实也很简单,前台一个form表单,post ...
- 济南学习 Day 3 T1 pm
巧克力棒(chocolate)Time Limit:1000ms Memory Limit:64MB题目描述LYK 找到了一根巧克力棒,但是这根巧克力棒太长了,LYK 无法一口吞进去.具体地,这根巧克 ...
- THREE.js代码备份——canvas_lines(随机点、画线)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
- mysql数据库的简单操作
首先进入mysql:mysql -u root -p 1.建库: create database 库名称; 例如:create database mydata;(创建一个名为“mydata”的库): ...
- c++11: less的用法
less主要是重载了operator()方法,用来比较lhs 和 rhs std::less::operator() bool operator()(const T &lhs, const T ...
- 完美解决fixed 水平居中问题
群里的朋友问的,发现自己没写过:就写了下,原理和网上的fixed上下左右四个角的原理一样! 1.防止页面振动: body{ _background-image: url(about:blank); _ ...
- [大牛翻译系列]Hadoop(2)MapReduce 连接:复制连接(Replication join)
4.1.2 复制连接(Replication join) 复制连接是map端的连接.复制连接得名于它的具体实现:连接中最小的数据集将会被复制到所有的map主机节点.复制连接有一个假设前提:在被连接的数 ...