Comment utiliser js pour transférer Json entre l'avant et l'arrière

Cette fois, je vais vous montrer comment utiliser js pour réaliser la transmission front-end et back-end de Json. Quelles sont les précautions concernant l'utilisation de js pour réaliser la transmission front-end et back-end de. Json. Ce qui suit est un cas pratique, jetons un coup d'œil.

Quel que soit le framework utilisé, il existe le problème de la transmission des données du contrôleur vers la page Html ou la page jsp. Le moyen le plus courant est de transmettre une chaîne Json . J’étais un peu vague sur cette connaissance auparavant, alors je vais régler le problème maintenant.

[Méthode de base de Jquery]

Jquery et l'ajax encapsulé en interne sont couramment utilisés pour implémenter le transfert de valeur. 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); 
 }); 
});

post demande des données via la méthode de publication HTTP :

$.post(URL,data,callback);

$("button").click(function(){ 
  $.post("/try/ajax/demo_test_post.php", 
  { 
    name:"1263", 
    url:"http://www.php.com" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

【framework spring mvc + Jquery ajax】

Le contrôleur du framework spring mvc 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, le contrôleur La couche peut également être une entité réceptrice.

[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 procédons-nous la valeur json, laissez-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 : employees[0].name ="LiMing";

Exemple d'application dans le framework MUI, ajoutez la balise 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='<a class="mui-navigate-right" id=&#39;+ id +&#39; data-audio=&#39;+ audio +&#39;>'+'<img class="mui-media-object mui-pull-left" srcload="&#39;+picUrl+&#39;">'+'<p class="mui-media-body">'+name+'<p class="mui-ellipsis">'+author+'</p>'+'</p>'+'</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
		}
	});
});

[Résumé]

Par rapport aux fichiers XML, les données au format JSON ont une vitesse de transmission rapide et stable et constituent un très bon choix dans la conception frontale.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le téléchargement et le téléchargement de fichiers Koa2

Comment implémenter l'aperçu local des images téléchargées par jQuery

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!