js implementiert die Front-End- und Back-End-Übertragung von Json-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-04-20 17:30:26

Original

2382 Leute haben es durchsucht

Dieses Mal werde ich Ihnen js vorstellen, um die Front-End- und Back-End-Übertragung von Json zu realisieren. Was sind die Vorsichtsmaßnahmen für js, um die Front-End- und Back-End-Übertragung von Json zu realisieren? ist ein praktischer Fall, werfen wir einen Blick darauf.

Unabhängig davon, welches Framework verwendet wird, besteht das Problem der Übertragung von Daten vom Controller zur HTML-Seite oder JSP-Seite. Die häufigste Methode ist die Übergabe der Json-

-Zeichenfolge . Ich war vorher etwas vage, was diese Erkenntnis betrifft, also werde ich sie jetzt klären.

[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.com" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

Nach dem Login kopieren

【Spring MVC Framework + Jquery Ajax】Der Controller des Spring MVC Framework 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:

Wenn die in js definierten Parameter mit der durch die Persistenzschicht definierten Javabean, dem Controller, übereinstimmen Die Schicht kann auch eine empfangende Entität sein.

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

[Beispiel für MUI-Bindungsdaten]Es ist einfach, den vom Controller erhaltenen JSON-Wert mithilfe von JQuery abzurufen. Wie gehen wir also vor? Lassen Sie den JSON-Wert wie wäre es, ihn an die Seitensteuerung zu binden? Lassen Sie uns zunächst kurz die Struktur von JSON verstehen:

Als oben definiertes JSON-Objekt repräsentiert {} das Objekt, [] repräsentiert das Array, „“ repräsentiert das Attribut oder den Wert und : repräsentiert das Letzteres ist der Wert von Ersterem.

var employees=[{"name":"Jon","age":12},{"name":"Tom","age":14}];

Nach dem Login kopieren

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:

String mit HTML-Feld in HTML-Tag konvertieren

So übergeben Sie JSON mithilfe von Post-Methodenparametern

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