Heim > Web-Frontend > js-Tutorial > js implementiert die Front-End- und Back-End-Übertragung von Json-Code untereinander

js implementiert die Front-End- und Back-End-Übertragung von Json-Code untereinander

php中世界最好的语言
Freigeben: 2018-05-11 14:04:59
Original
2561 Leute haben es durchsucht

Dieses Mal werde ich Ihnen js zur Verfügung stellen, um die gegenseitige Übertragung von Json-Code zwischen Front- und Backend zu realisieren Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

[Jquery-Basismethode]Jquery und intern gekapseltes Ajax werden häufig zur Implementierung der Wertübertragung verwendet. Schauen Sie sich zunächst die get()- und post()-Syntax von jquery an. Die get()-Methode ruft Daten vom Server ab. Ihre Hauptparameter bestehen darin, die Hintergrundanforderungsadresse und die für die Verarbeitung verantwortliche

Rückruffunktion

$.get(URL,callback);

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

Post-Anforderungsdaten über die HTTP-Post-Methode:

$.post(URL,data,callback);

$("button").click(function(){ 
  $.post("/try/ajax/demo_test_post.php", 
  { 
    name:教程", 
    url:"http://www.php.cn" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});
Nach dem Login kopieren

[spring mvc

Framework+Jquery ajax]Der Controller des Spring MVC-Frameworks gibt Parameter vom Typ Map über die Annotationsmethode an js zurück .

@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); 
   
}
Nach dem Login kopieren

jquery ajax erhält den Rückgabewert:

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); 
  } 
   
})
Nach dem Login kopieren
Wenn die in js definierten Parameter mit dem von der Persistenzschicht definierten Javabean übereinstimmen, kann die Controllerschicht auch empfangen Entitäten.

[Beispiel für MUI-Bindungsdaten]

Es ist einfach, den vom Controller erhaltenen JSON-Wert mithilfe von JQuery abzurufen. Wie gehen wir also vor? den JSON-Wert, lassen Sie Was ist mit der Bindung an das Seitensteuerelement? Lassen Sie uns zunächst kurz die Struktur von JSON verstehen:

var employees=[{"name":"Jon","age":12},{"name":"Tom","age":14}];
Nach dem Login kopieren
Als oben definiertes JSON-Objekt repräsentiert {} das Objekt, [] repräsentiert das Array, "" repräsentiert das Attribut oder den Wert und : repräsentiert letzteres als der Wert des ersteren.

Erhalten Sie den Wert im JSON-Objekt:

var name=employees[0].name;

Ändern:

employees[0].name ="LiMing";

Anwendungsbeispiel im MUI-Framework, li-Tag zur Liste hinzufügen:

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
		}
	});
});
Nach dem Login kopieren
[Zusammenfassung]

Im Vergleich zu XML-Dateien weisen Daten im JSON-Format eine schnelle und stabile Übertragungsgeschwindigkeit auf und sind eine sehr gute Wahl für das Front-End-Design.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue2-Implementierung der Warenkorb- und Adressauswahl-Fallanalyse


Vue-Implementierung von Select All und Inverse Auswahlfunktion Fall Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonjs implementiert die Front-End- und Back-End-Übertragung von Json-Code untereinander. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage