利用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 相关文章推荐
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
mysql时区问题
2008/03/26 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php数组添加元素方法小结
2014/12/20 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
运动会100米解说词
2014/01/23 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
单位实习介绍信
2015/05/05 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
python字符串的一些常见实用操作
2022/04/06 Python