当前位置:Gxlcms > JavaScript > 怎样使用js实现前后台传输Json

怎样使用js实现前后台传输Json

时间:2021-07-01 10:21:17 帮助过:27人阅读

这次给大家带来怎样使用js实现前后台传输Json,使用js实现前后台传输Json的注意事项有哪些,下面就是实战案例,一起来看一下。

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

【Jquery基本方法】

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

$.get(URL,callback);

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

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

$.post(URL,data,callback);

  1. $("button").click(function(){
  2. $.post("/try/ajax/demo_test_post.php",
  3. {
  4. name:"1263",
  5. url:"http://www.php.com"
  6. },
  7. function(data,status){
  8. alert("数据: \n" + data + "\n状态: " + status);
  9. });
  10. });

【spring mvc框架+Jquery ajax】

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

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

jquery ajax获得返回值:

  1. var params={};
  2. params.num=num;
  3. params.id=id;
  4. params.amount=amount;
  5. $.ajax({
  6. async:false,
  7. type:"post",
  8. url:"uset/update",
  9. data:params,
  10. dataType:"json",
  11. success:function(data){
  12. if(data.result=='success'){
  13. alert('修改成功');
  14. }else{
  15. alert('修改失败');
  16. }
  17. },
  18. error:function(data){
  19. alert(data.result);
  20. }
  21. })

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

【MUI绑定数据实例】

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

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

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

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

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

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

  1. mui.init();
  2. var url="queryUser"
  3. mui.ajax(url,{
  4. data:{
  5. 'type':1,
  6. 'limit':10
  7. },
  8. dataType:'json',
  9. type:'post',
  10. success:function(data){
  11. var songs=data.result.songs;
  12. var list=document.getElementById("list");
  13. var fragment=document.creeateDocumentFramgment();
  14. var li;
  15. mui.each(songs,function(index,item){
  16. var id=item.id,
  17. name=item.album.name,
  18. author=item.artists[0].name;
  19. li=document.createElement('li');
  20. li.className="mui-table-view-cell mui-media";
  21. li.innerHTML='<a class="mui-navigate-right" id='+ id +' data-audio='+ audio +'>'+'<img class="mui-media-object mui-pull-left" srcload="'+picUrl+'">'+'<p class="mui-media-body">'+name+'<p class="mui-ellipsis">'+author+'</p>'+'</p>'+'</a>';
  22. fragment.appendChild(li);
  23. })
  24. list.appendChild(fragment);
  25. mui(document).imageLazyload({
  26. placeholder:'../img/60*60.gif';
  27. });
  28. },erro:function(xhr,type,errorThrown){
  29. console.log(type);
  30. }
  31. });
  32. //列表点击事件
  33. mui("#list").on('tap','li a',function(){
  34. var id=this.getAttribute('id');
  35. var audio=this.getAttribute('data-audio');
  36. mui.openWindow({
  37. url:'music.html',
  38. id:'music.html',
  39. extras:{
  40. musicId:id,
  41. audioUrl:audio
  42. }
  43. });
  44. });

【总结】

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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

如何使用Koa2文件上传下载

如何实现jQuery上传图片本地预览

以上就是怎样使用js实现前后台传输Json的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行