js implémente la transmission front-end et back-end d'exemples de code Json

Quel que soit le framework utilisé, il existe le problème de la transmission des données du contrôleur à la page HTML ou à la page jsp. Le moyen le plus courant consiste à transmettre une chaîne Json. J'étais un peu vague sur cette connaissance auparavant, mais maintenant je l'ai réglé et j'espère que cela pourra aider tout le monde.

[Méthode de base de Jquery]

Jquery et ajax encapsulés en interne sont couramment utilisés pour transférer des valeurs. Tout d’abord, jetez un œil à la syntaxe get() et post() de jquery. La méthode get() obtient les données du serveur. Ses principaux paramètres sont d'obtenir l'adresse de la requête en arrière-plan et la fonction de rappel responsable du traitement :

$.get(URL,callback);

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

publier des demandes de données via la méthode de publication HTTP :

$.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 framework + Jquery ajax]

spring mvc Le contrôleur du framework renvoie les paramètres de type Map

@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 obtient la valeur de retour :

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); 
  } 
   
})

Si les paramètres définis dans js sont cohérents avec le javabean défini par la couche de persistance, la couche contrôleur peut également recevoir des entités.

[Exemple de données de liaison MUI]

Il est facile d'obtenir la valeur json obtenue par le contrôleur à l'aide de jquery. Alors, comment exploiter la valeur json et la lier au contrôle de page ? Tout d'abord, comprenons brièvement la structure de json :

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

Comme l'objet Json défini ci-dessus, {} représente l'objet, [] représente le tableau, "" représente l'attribut ou la valeur, et : représente le ce dernier est la valeur du premier.

Récupérer la valeur dans l'objet json : var name=employees[0].name;

Modifier : employés[0].name="LiMing";

MUI Exemples d'applications dans le framework, ajoutant des balises li à la liste :

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=&#39;<a class="mui-navigate-right" id=&#39;+ id +&#39; data-audio=&#39;+ audio +&#39;>&#39;+&#39;<img class="mui-media-object mui-pull-left" srcload="&#39;+picUrl+&#39;">&#39;+&#39;<p class="mui-media-body">&#39;+name+&#39;<p class="mui-ellipsis">&#39;+author+&#39;</p>&#39;+&#39;</p>&#39;+&#39;</a>&#39;;
		fragment.appendChild(li);
		})
		
		list.appendChild(fragment);
		mui(document).imageLazyload({
			placeholder:&#39;../img/60*60.gif&#39;;
		});
		
	},erro:function(xhr,type,errorThrown){
		console.log(type);
	}
	
});
//列表点击事件
mui("#list").on(&#39;tap&#39;,&#39;li a&#39;,function(){
	var id=this.getAttribute(&#39;id&#39;);
	var audio=this.getAttribute(&#39;data-audio&#39;);
	mui.openWindow({
		url:&#39;music.html&#39;,
		id:&#39;music.html&#39;,
		extras:{
			musicId:id,
			audioUrl:audio
		}
	});
});

[Résumé]

Par rapport aux fichiers XML, les données au format json ont une vitesse de transmission rapide et stable. est un très bon choix en matière de design.

Recommandations associées :

Comment transférer un tableau json vers php via ajax et insérer des données dans la base de données via php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!