js implémente la transmission Json front-end et back-end entre eux

Cette fois, je vais vous apporter js pour réaliser la transmission mutuelle de Json entre le front et le backend. Quelles sont les précautions pour réaliser la transmission mutuelle de Json entre le front et le backend en utilisant js. cas pratiques, jetons un coup d'oeil.

[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:"菜鸟教程", 
    url:"http://www.runoob.com" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

[spring mvcframework+Jquery ajax]

Le contrôleur du framework spring mvc renvoie les paramètres de type Map grâce à la méthode d'annotation.

@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 :

Explication détaillée des étapes d'implémentation d'Observer dans Vue

Résumé des méthodes pour les composants parents de Vue pour appeler des composants enfants

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!