利用js实现前后台传送Json的示例代码


Posted in Javascript onMarch 29, 2018

无论使用什么框架都存在着从controller向Html页面或者jsp页面传递数据的问题,最常用的方式是传递Json字符串。以前对这块知识有些模糊,现在整理一下。

【Jquery基本方法】

实现传值常用的是Jquery以及内部封装的ajax。首先看一下jquery的get()和post()语法。get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数:

$.get(URL,callback);

$("button").click(function(){ 
 $.get("demo_test.php",function(data,status){ 
  alert("数据: " + data + "\n状态: " + status); 
 }); 
});

post通过HTTP post方法请求数据:

$.post(URL,data,callback);

$("button").click(function(){ 
  $.post("/try/ajax/demo_test_post.php", 
  { 
    name:"菜鸟教程", 
    url:"http://www.runoob.com" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

【spring mvc框架+Jquery ajax】

spring mvc框架的controller通过标注方法向js返回Map<String,Object>类型参数。

@RequestMapping("update") 
@ResponseBody //此批注是ajax获取返回值使用 
public Map<String,Object> update(Long num,BigDecimal amount){ 
  map<string,Object> resultMap=new HashMap<string,Object>(); 
   
  if(num==null || agentId==null || amount==null){ 
    resultMap.put("result","参数不合法"); 
    return resultMap; 
  } 
  resultMap.put("result",result); 
   
}

jquery ajax获得返回值:

var params={}; 
params.num=num; 
params.id=id; 
params.amount=amount; 
$.ajax({ 
  async:false, 
  type:"post", 
  url:"uset/update", 
  data:params, 
  dataType:"json", 
  success:function(data){ 
    if(data.result=='success'){ 
      alert('修改成功'); 
    }else{ 
      alert('修改失败'); 
    } 
  }, 
  error:function(data){ 
    alert(data.result); 
  } 
   
})

如果在js中定义的参数与持久层定义的javabean保持一致,controller层同样可以接收实体。

【MUI绑定数据实例】

使用jquery很容易获得controller获得的json值,那我们如何操作json值,让其绑定到页面控件呢?首先我们简单理解一下json的结构:

var employees=[{"name":"Jon","age":12},{"name":"Tom","age":14}];

如上面定义的Json对象,{}表示对象,[]表示数组,"" 表示属性或值,: 表示后者是前者的值。

获得到json对象中的值:var name=employees[0].name;

修改:employees[0].name="LiMing";

MUI框架中的应用举例,实现list中添加li 标签:

mui.init();
var url="queryUser"
mui.ajax(url,{
	data:{
		'type':1,
		'limit':10
	},
	dataType:'json',
	type:'post',
	success:function(data){
		var songs=data.result.songs;
		var list=document.getElementById("list");
		var fragment=document.creeateDocumentFramgment();
		
		var li;
		mui.each(songs,function(index,item){
			var id=item.id,
			name=item.album.name,
			author=item.artists[0].name;
			
			li=document.createElement('li');
			li.className="mui-table-view-cell mui-media";
			li.innerHTML='<a class="mui-navigate-right" id='+ id +' data-audio='+ audio +'>'+'<img class="mui-media-object mui-pull-left" data-lazyload="'+picUrl+'">'+'<div class="mui-media-body">'+name+'<p class="mui-ellipsis">'+author+'</p>'+'</div>'+'</a>';
		fragment.appendChild(li);
		})
		
		list.appendChild(fragment);
		mui(document).imageLazyload({
			placeholder:'../img/60*60.gif';
		});
		
	},erro:function(xhr,type,errorThrown){
		console.log(type);
	}
	
});
//列表点击事件
mui("#list").on('tap','li a',function(){
	var id=this.getAttribute('id');
	var audio=this.getAttribute('data-audio');
	mui.openWindow({
		url:'music.html',
		id:'music.html',
		extras:{
			musicId:id,
			audioUrl:audio
		}
	});
});

【总结】

json格式的数据相对于xml文件来说,传输速度快且稳定,在前端设计中是一种非常不错的选择。

以上这篇利用js实现前后台传送Json的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
layui文件上传实现代码
May 20 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 #Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 #Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 #Javascript
Vue.js 表单控件操作小结
Mar 29 #Javascript
js传递数组参数到后台controller的方法
Mar 29 #Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 #Javascript
Vue项目中如何引入icon图标
Mar 28 #Javascript
You might like
php发送html格式文本邮件的方法
2015/06/10 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
JS中的多态实例详解
2017/10/15 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
python多进程共享变量
2016/04/06 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python温度转换实例分析
2018/01/17 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python xlsxwriter模块的使用
2020/12/24 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
小学生毕业评语
2014/12/26 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS