Wie übermittelt das Frontend Json-Daten an das Backend?

Dieses Mal zeige ich Ihnen, wie das Front-End Json-Daten an den Hintergrund überträgt. Was sind die Vorkehrungen für die Übertragung von Json-Daten an den Hintergrund? 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); 
 }); 
});

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

$.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 mvcFramework+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); 
   
}

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); 
  } 
   
})

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}];

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
		}
	});
});

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

Verwenden Sie jQuery, um beim Hochladen von Bildern eine lokale Vorschau anzuzeigen

vue.JS, um einen Warenkorb zu erstellen und Adressabgleich

Das obige ist der detaillierte Inhalt vonWie übermittelt das Frontend Json-Daten an das Backend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!