Beispielcode für die Verwendung von js zur Übertragung von Json zwischen Front- und Backends

Im Folgenden werde ich Ihnen einen Beispielcode mitteilen, der js verwendet, um Json im Front- und Backend zu übertragen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

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

$.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:"菜鸟教程", 
    url:"http://www.runoob.com" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

[Spring MVC Framework + Jquery Ajax]

Der Controller des Spring MVC Framework gibt Map30111e92e3d8cde895d9f135d874b708Type-Parameter.

@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 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 der in der Persistenzschicht definierten Javabean übereinstimmen, kann die Controllerschicht auch Entitäten empfangen.

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

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

Da das oben definierte Json-Objekt {} ein Objekt darstellt, [] ein Array darstellt, „“ stellt ein Attribut oder einen Wert dar: zeigt an, dass letzteres der Wert des ersteren ist.

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=&#39;<a class="mui-navigate-right" id=&#39;+ id +&#39; data-audio=&#39;+ audio +&#39;>&#39;+&#39;<img class="mui-media-object mui-pull-left" srcload="&#39;+picUrl+&#39;">&#39;+&#39;<p class="mui-media-body">&#39;+name+&#39;<p class="mui-ellipsis">&#39;+author+&#39;</p>&#39;+&#39;</p>&#39;+&#39;</a>&#39;;
		fragment.appendChild(li);
		})
		
		list.appendChild(fragment);
		mui(document).imageLazyload({
			placeholder:&#39;../img/60*60.gif&#39;;
		});
		
	},erro:function(xhr,type,errorThrown){
		console.log(type);
	}
	
});
//列表点击事件
mui("#list").on(&#39;tap&#39;,&#39;li a&#39;,function(){
	var id=this.getAttribute(&#39;id&#39;);
	var audio=this.getAttribute(&#39;data-audio&#39;);
	mui.openWindow({
		url:&#39;music.html&#39;,
		id:&#39;music.html&#39;,
		extras:{
			musicId:id,
			audioUrl:audio
		}
	});
});

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So erstellen Sie ein Ajax-Objekt und sind mit mehreren Browsern kompatibel

In Ajax verschachtelte Ajax-Anfragen Anfragen Beispielcode

Verwenden Sie Ajax-Technologie, um die Homepage-Anmeldefunktion über das XMLHttpRequest-Objekt abzuschließen

Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von js zur Übertragung von Json zwischen Front- und Backends. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!