웹 프론트엔드 JS 튜토리얼 Node.js는 프런트엔드와 백엔드 Json 전송을 서로 구현합니다.

Node.js는 프런트엔드와 백엔드 Json 전송을 서로 구현합니다.

Apr 27, 2018 pm 05:36 PM
javascript json 무대 뒤에서

이번에는 프론트와 백엔드 사이의 Json 상호 전송을 구현하기 위해 js를 가져오겠습니다. 프론트와 백엔드 사이에서 Json의 상호 전송을 구현하기 위해 js가 사용할 수 있는 notes는 무엇입니까? 살펴보자.

【Jquery 기본 방법】

값 전송을 구현하는 데 일반적으로 사용되는 방법은 Jquery와 내부적으로 캡슐화된 Ajax입니다. 먼저 jquery의 get() 및 post() 구문을 살펴보세요. get() 메소드는 서버에서 데이터를 가져옵니다. 주요 매개변수는 백그라운드 요청 주소와 처리를 담당하는 콜백 함수를 가져오는 것입니다.

$.get(URL, callback);

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

post는 다음을 통해 데이터를 요청합니다. HTTP 게시 방법 :

$.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 mvcframework+Jquery ajax]

spring mvc 프레임워크의 컨트롤러는 Map를 주석 메소드인 Type 매개변수를 통해 js로 변환합니다.

@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); 
   
}</p>
<p style="text-align: left;"><strong>jquery ajax는 다음 반환 값을 얻습니다. </strong></p>
<pre class="brush:php;toolbar:false">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); 
  } 
   
})
로그인 후 복사

js에 정의된 매개변수가 지속성 계층에서 정의한 javabean과 일치하면 컨트롤러 계층도 엔터티를 수신할 수 있습니다.

[MUI 바인딩 데이터 예]

jquery를 사용하여 컨트롤러에서 얻은 json 값을 쉽게 얻을 수 있습니다. 그렇다면 json 값을 어떻게 조작하고 이를 페이지 컨트롤에 바인딩할까요? 먼저 json의 구조를 간단히 이해해보자:

var employees=[{"name":"Jon","age":12},{"name":"Tom","age":14}];
로그인 후 복사

위에 정의된 Json 객체와 같이, {}는 객체를 나타내고, []는 배열을 나타내고, ""는 속성이나 값을 나타내고, :는 후자를 객체의 값으로 나타낸다. 이전의.

json 개체의 값 가져오기: var name=employees[0].name;

수정: employees[0].name="LiMing";

MUI 프레임워크의 응용 프로그램 예, 구현 목록에 li 태그를 추가하세요:

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
		}
	});
});
로그인 후 복사

[요약]

xml 파일에 비해 json 형식 데이터는 전송 속도가 빠르고 안정적이며 프런트엔드 디자인에 매우 좋은 선택입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue에서 Observer를 구현하는 단계에 대한 자세한 설명

Vue 상위 구성 요소 호출 하위 구성 요소 메서드 요약

위 내용은 Node.js는 프런트엔드와 백엔드 Json 전송을 서로 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Discuz 백그라운드 로그인 문제 해결 방법 공개 Discuz 백그라운드 로그인 문제 해결 방법 공개 Mar 03, 2024 am 08:57 AM

Discuz 백그라운드 로그인 문제에 대한 해결책이 공개되었습니다. 인터넷의 급속한 발전으로 인해 웹 사이트 구축이 점점 보편화되고 있으며 일반적으로 사용되는 포럼 웹 사이트 구축 시스템으로 Discuz가 선호되고 있습니다. 많은 웹마스터. 그러나 강력한 기능으로 인해 Discuz를 사용할 때 백그라운드 로그인 문제와 같은 몇 가지 문제가 발생할 수 있습니다. 오늘은 Discuz 백그라운드 로그인 문제에 대한 해결책을 공개하고 구체적인 코드 예시를 제공하여 도움이 필요한 분들에게 도움이 되기를 바라겠습니다.

MySQL5.7과 MySQL8.0의 차이점은 무엇입니까? MySQL5.7과 MySQL8.0의 차이점은 무엇입니까? Feb 19, 2024 am 11:21 AM

MySQL5.7과 MySQL8.0은 서로 다른 두 가지 MySQL 데이터베이스 버전입니다. 두 버전 사이에는 몇 가지 주요 차이점이 있습니다. 성능 개선: MySQL8.0은 MySQL5.7에 비해 성능이 일부 향상되었습니다. 여기에는 더 나은 쿼리 최적화 프로그램, 더 효율적인 쿼리 실행 계획 생성, 더 나은 인덱싱 알고리즘 및 병렬 쿼리 등이 포함됩니다. 이러한 개선 사항은 쿼리 성능과 전반적인 시스템 성능을 향상시킬 수 있습니다. JSON 지원: MySQL 8.0에는 JSON 데이터의 저장, 쿼리 및 인덱싱을 포함하여 JSON 데이터 유형에 대한 기본 지원이 도입되었습니다. 이를 통해 MySQL에서 JSON 데이터를 보다 편리하고 효율적으로 처리하고 조작할 수 있습니다. 트랜잭션 기능: MySQL8.0은 원자와 같은 몇 가지 새로운 트랜잭션 기능을 도입합니다.

PHP 배열을 JSON으로 변환하기 위한 성능 최적화 팁 PHP 배열을 JSON으로 변환하기 위한 성능 최적화 팁 May 04, 2024 pm 06:15 PM

PHP 배열을 JSON으로 변환하기 위한 성능 최적화 방법은 다음과 같습니다. JSON 확장 및 json_encode() 함수를 사용하여 문자 이스케이프를 방지하고 버퍼를 사용하여 JSON 인코딩 결과 캐싱을 고려합니다. JSON 인코딩 라이브러리.

WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 Mar 05, 2024 pm 09:27 PM

WordPress 백엔드 잘못된 코드가 걱정되나요? 이러한 솔루션을 사용해 보십시오. 웹 사이트 구축에 WordPress가 널리 적용되면서 많은 사용자가 WordPress 백엔드에서 잘못된 코드 문제에 직면할 수 있습니다. 이러한 종류의 문제로 인해 배경 관리 인터페이스에 잘못된 문자가 표시되어 사용자에게 큰 문제를 야기합니다. 이 문서에서는 사용자가 WordPress 백엔드에서 잘못된 문자 문제를 해결하는 데 도움이 되는 몇 가지 일반적인 솔루션을 소개합니다. wp-config.php 파일을 수정하고 wp-config를 엽니다.

Pandas 사용 튜토리얼: JSON 파일 읽기를 위한 빠른 시작 Pandas 사용 튜토리얼: JSON 파일 읽기를 위한 빠른 시작 Jan 13, 2024 am 10:15 AM

빠른 시작: JSON 파일을 읽는 Pandas 방법, 특정 코드 예제가 필요합니다. 소개: 데이터 분석 및 데이터 과학 분야에서 Pandas는 중요한 Python 라이브러리 중 하나입니다. 풍부한 기능과 유연한 데이터 구조를 제공하며, 다양한 데이터를 쉽게 처리하고 분석할 수 있습니다. 실제 애플리케이션에서는 JSON 파일을 읽어야 하는 상황에 자주 직면합니다. 이 기사에서는 Pandas를 사용하여 JSON 파일을 읽고 특정 코드 예제를 첨부하는 방법을 소개합니다. 1. 팬더 설치

Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 어떻게 제어합니까? Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 어떻게 제어합니까? May 06, 2024 pm 10:09 PM

Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 제어합니다. 직렬화: @JsonIgnore: 속성 무시 @JsonProperty: 이름 지정 @JsonGetter: get 메서드 사용 @JsonSetter: set 메서드 사용 역직렬화: @JsonIgnoreProperties: @JsonProperty 속성 무시: 이름 지정 @JsonCreator: 생성자 사용 @JsonDeserialize: 사용자 정의 논리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

PHP에 대한 심층적인 이해: JSON 유니코드를 중국어로 변환하는 구현 방법 PHP에 대한 심층적인 이해: JSON 유니코드를 중국어로 변환하는 구현 방법 Mar 05, 2024 pm 02:48 PM

PHP에 대한 심층적인 이해: JSONUnicode를 중국어로 변환하는 구현 방법 개발 중에 JSON 데이터를 처리해야 하는 상황이 자주 발생하며, JSON의 유니코드 인코딩은 일부 시나리오, 특히 변환해야 할 때 몇 가지 문제를 일으킬 수 있습니다. 유니코드 인코딩을 한자로 변환하는 경우입니다. PHP에는 이러한 변환 프로세스를 달성하는 데 도움이 되는 몇 가지 방법이 아래에 소개되고 구체적인 코드 예제가 제공됩니다. 먼저 JSON의 Un을 먼저 이해해 봅시다.

See all articles