Maison interface Web js tutoriel js implémente la transmission Json front-end et back-end entre eux

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

Apr 27, 2018 pm 05:36 PM
javascript json 后台

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); 
 }); 
});
Copier après la connexion

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); 
  }); 
});
Copier après la connexion

[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); 
   
}
Copier après la connexion

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); 
  } 
   
})
Copier après la connexion

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}];
Copier après la connexion

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
		}
	});
});
Copier après la connexion

[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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

La solution au problème de connexion en arrière-plan Discuz révélée La solution au problème de connexion en arrière-plan Discuz révélée Mar 03, 2024 am 08:57 AM

La solution au problème de connexion en arrière-plan de Discuz est révélée. Des exemples de code spécifiques sont nécessaires Avec le développement rapide d'Internet, la construction de sites Web est devenue de plus en plus courante, et Discuz, en tant que système de création de sites Web de forum couramment utilisé, a été favorisé par. de nombreux webmasters. Cependant, précisément en raison de ses fonctions puissantes, nous rencontrons parfois des problèmes lors de l'utilisation de Discuz, comme des problèmes de connexion en arrière-plan. Aujourd'hui, nous allons révéler la solution au problème de connexion en arrière-plan de Discuz et fournir des exemples de code spécifiques. Nous espérons aider ceux qui en ont besoin.

Quelle est la différence entre MySQL5.7 et MySQL8.0 ? Quelle est la différence entre MySQL5.7 et MySQL8.0 ? Feb 19, 2024 am 11:21 AM

MySQL5.7 et MySQL8.0 sont deux versions différentes de la base de données MySQL. Il existe quelques différences principales entre elles : Améliorations des performances : MySQL8.0 présente quelques améliorations de performances par rapport à MySQL5.7. Ceux-ci incluent de meilleurs optimiseurs de requêtes, une génération de plans d'exécution de requêtes plus efficaces, de meilleurs algorithmes d'indexation et des requêtes parallèles, etc. Ces améliorations peuvent améliorer les performances des requêtes et les performances globales du système. Prise en charge JSON : MySQL 8.0 introduit la prise en charge native du type de données JSON, y compris le stockage, la requête et l'indexation des données JSON. Cela rend le traitement et la manipulation des données JSON dans MySQL plus pratiques et efficaces. Fonctionnalités de transaction : MySQL8.0 introduit de nouvelles fonctionnalités de transaction, telles que l'atome

Conseils d'optimisation des performances pour la conversion de tableaux PHP en JSON Conseils d'optimisation des performances pour la conversion de tableaux PHP en JSON May 04, 2024 pm 06:15 PM

Les méthodes d'optimisation des performances pour la conversion des tableaux PHP en JSON incluent : l'utilisation d'extensions JSON et de la fonction json_encode() ; l'ajout de l'option JSON_UNESCAPED_UNICODE pour éviter l'échappement de caractères ; l'utilisation de tampons pour améliorer les performances d'encodage de boucle et l'utilisation d'un tiers ; Bibliothèque d'encodage JSON.

Êtes-vous inquiet du code tronqué du backend WordPress ? Essayez ces solutions Êtes-vous inquiet du code tronqué du backend WordPress ? Essayez ces solutions Mar 05, 2024 pm 09:27 PM

Êtes-vous inquiet du code tronqué du backend WordPress ? Essayez ces solutions, des exemples de code spécifiques sont nécessaires. Avec l’application généralisée de WordPress dans la construction de sites Web, de nombreux utilisateurs peuvent rencontrer le problème d’un code tronqué dans le backend WordPress. Ce type de problème entraînera l'affichage de caractères tronqués dans l'interface de gestion en arrière-plan, causant de gros problèmes aux utilisateurs. Cet article présentera quelques solutions courantes pour aider les utilisateurs à résoudre le problème des caractères tronqués dans le backend WordPress. Modifiez le fichier wp-config.php et ouvrez wp-config.

Tutoriel d'utilisation de Pandas : Démarrage rapide pour la lecture de fichiers JSON Tutoriel d'utilisation de Pandas : Démarrage rapide pour la lecture de fichiers JSON Jan 13, 2024 am 10:15 AM

Démarrage rapide : méthode Pandas de lecture des fichiers JSON, des exemples de code spécifiques sont requis Introduction : Dans le domaine de l'analyse des données et de la science des données, Pandas est l'une des bibliothèques Python importantes. Il fournit des fonctions riches et des structures de données flexibles, et peut facilement traiter et analyser diverses données. Dans les applications pratiques, nous rencontrons souvent des situations où nous devons lire des fichiers JSON. Cet article expliquera comment utiliser Pandas pour lire des fichiers JSON et joindra des exemples de code spécifiques. 1. Installation de Pandas

Comment les annotations de la bibliothèque Jackson contrôlent-elles la sérialisation et la désérialisation JSON ? Comment les annotations de la bibliothèque Jackson contrôlent-elles la sérialisation et la désérialisation JSON ? May 06, 2024 pm 10:09 PM

Les annotations dans la bibliothèque Jackson contrôlent la sérialisation et la désérialisation JSON : Sérialisation : @JsonIgnore : Ignorer la propriété @JsonProperty : Spécifiez le nom @JsonGetter : Utilisez la méthode get @JsonSetter : Utilisez la méthode set Désérialisation : @JsonIgnoreProperties : Ignorez la propriété @ JsonProperty : Spécifiez le nom @JsonCreator : utilisez le constructeur @JsonDeserialize : logique personnalisée

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Compréhension approfondie de PHP : méthode d'implémentation de conversion de JSON Unicode en chinois Compréhension approfondie de PHP : méthode d'implémentation de conversion de JSON Unicode en chinois Mar 05, 2024 pm 02:48 PM

Compréhension approfondie de PHP : méthode d'implémentation de conversion de JSONUnicode en chinois Au cours du développement, nous rencontrons souvent des situations où nous devons traiter des données JSON, et l'encodage Unicode en JSON nous posera quelques problèmes dans certains scénarios, en particulier lorsqu'Unicode doit être converti Lorsque l'encodage est converti en caractères chinois. En PHP, certaines méthodes peuvent nous aider à réaliser ce processus de conversion. Une méthode courante sera présentée ci-dessous et des exemples de code spécifiques seront fournis. Tout d’abord, comprenons d’abord le Un en JSON

See all articles