利用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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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.ini 中文版
2006/10/28 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
几行js代码实现自适应
2017/02/24 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
js实现验证码功能
2020/07/24 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
python装饰器与递归算法详解
2016/02/18 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
环境工程大学生个人的自我评价
2013/10/08 职场文书
会计工作决心书
2014/03/11 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Java中的Kotlin 内部类原理
2022/06/16 Java/Android