Verwenden Sie JS, um Json zwischen Front-End und Back-End zu senden

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von JS zum Übertragen von Json zwischen dem Front-End und dem Backend vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Unabhängig davon, welches Framework verwendet wird, besteht das Problem der Übergabe von Daten vom Controller an die HTML-Seite oder JSP-Seite. Die häufigste Methode ist die Übergabe von JSON-Strings. Ich war vorher etwas vage, was diese Erkenntnis betrifft, also werde ich das 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 zu erhalten:

$.get(URL,callback);

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

Post fordert Daten über die HTTP-Post-Methode an:

$.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]

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 JSON-Objekt oben definiert, 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";

Anwendungsbeispiele im MUI-Framework, Hinzufügen des li-Tags zur 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
		}
	});
});

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall gelesen haben In diesem Artikel und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Umwandeln der Groß-/Kleinschreibung zwischen JSON- und Array-Schlüsselwerten

So verwenden Sie den Diff-Algorithmus in Vue

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um Json zwischen Front-End und Back-End zu senden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!