您好,登錄后才能下訂單哦!
無(wú)論使用什么框架都存在著從controller向Html頁(yè)面或者jsp頁(yè)面?zhèn)鬟f數(shù)據(jù)的問(wèn)題,最常用的方式是傳遞Json字符串。以前對(duì)這塊知識(shí)有些模糊,現(xiàn)在整理一下。
【Jquery基本方法】
實(shí)現(xiàn)傳值常用的是Jquery以及內(nèi)部封裝的ajax。首先看一下jquery的get()和post()語(yǔ)法。get()方法是從服務(wù)器獲得數(shù)據(jù),其主要參數(shù)就是獲得后臺(tái)請(qǐng)求地址,以及負(fù)責(zé)處理的回調(diào)函數(shù):
$.get(URL,callback);
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status); }); });
post通過(guò)HTTP post方法請(qǐng)求數(shù)據(jù):
$.post(URL,data,callback);
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鳥(niǎo)教程", url:"http://www.runoob.com" }, function(data,status){ alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status); }); });
【spring mvc框架+Jquery ajax】
spring mvc框架的controller通過(guò)標(biāo)注方法向js返回Map<String,Object>類型參數(shù)。
@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","參數(shù)不合法"); 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中定義的參數(shù)與持久層定義的javabean保持一致,controller層同樣可以接收實(shí)體。
【MUI綁定數(shù)據(jù)實(shí)例】
使用jquery很容易獲得controller獲得的json值,那我們?nèi)绾尾僮鱦son值,讓其綁定到頁(yè)面控件呢?首先我們簡(jiǎn)單理解一下json的結(jié)構(gòu):
var employees=[{"name":"Jon","age":12},{"name":"Tom","age":14}];
如上面定義的Json對(duì)象,{}表示對(duì)象,[]表示數(shù)組,"" 表示屬性或值,: 表示后者是前者的值。
獲得到j(luò)son對(duì)象中的值:var name=employees[0].name;
修改:employees[0].name="LiMing";
MUI框架中的應(yīng)用舉例,實(shí)現(xiàn)list中添加li 標(biāo)簽:
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); } }); //列表點(diǎn)擊事件 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 } }); });
【總結(jié)】
json格式的數(shù)據(jù)相對(duì)于xml文件來(lái)說(shuō),傳輸速度快且穩(wěn)定,在前端設(shè)計(jì)中是一種非常不錯(cuò)的選擇。
以上這篇利用js實(shí)現(xiàn)前后臺(tái)傳送Json的示例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。