Utilisez JS pour envoyer Json entre le front-end et le back-end

Cette fois je vais vous présenter les précautions d'utilisation de JS pour transmettre Json entre le front end et le backend 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 à 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, 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:"PHP", 
    url:"http://www.PHP.cn" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

[spring mvc framework + 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";

Exemples d'application dans le framework MUI, ajout de 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='<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
		}
	});
});

Je pense que vous maîtrisez la méthode après avoir lu le Dans le cas de cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Conversion de la casse entre les valeurs de clé json et tableau

Comment utiliser l'algorithme diff dans vue

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!