js를 사용하여 앞뒤 간에 Json을 전송하는 샘플 코드

이제 js를 사용하여 프론트엔드와 백엔드에서 Json을 전송하는 샘플 코드를 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

어떤 프레임워크를 사용하든 컨트롤러에서 Html 페이지나 JSP 페이지로 데이터를 전달하는 데 문제가 있습니다. 가장 일반적인 방법은 Json 문자열을 전달하는 것입니다. 이전에는 이 지식에 대해 조금 모호했기 때문에 이제 정리하겠습니다.

【Jquery 기본 방법】

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

$.post(URL,data,callback);

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

【spring mvc Framework + Jquery ajax】

spring mvc 프레임워크의 컨트롤러가 반환됩니다. 주석 메소드1384ae87b3aa4d7618d5d6d4b582a21bType 매개변수를 통해 js에 매핑합니다.

$("button").click(function(){ 
  $.post("/try/ajax/demo_test_post.php", 
  { 
    name:"菜鸟教程", 
    url:"http://www.runoob.com" 
  }, 
    function(data,status){ 
    alert("数据: \n" + data + "\n状态: " + status); 
  }); 
});

jquery ajax는 다음 반환 값을 얻습니다.

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

js에 정의된 매개변수가 지속성 레이어에 의해 정의된 javabean과 일치하면 컨트롤러 레이어도 엔터티를 받을 수 있습니다.

[MUI 바인딩 데이터 예]

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

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

위에서 정의한 Json 객체처럼, {}는 객체를 나타내고, []는 배열을 나타내고, ""는 속성이나 값을 나타내고, :는 후자를 다음과 같이 나타낸다. 전자의 가치.

json 개체의 값 가져오기:

var name=employees[0].name;

수정:

employees[0].name="LiMing";

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

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

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Ajax 객체를 생성하고 여러 브라우저와 호환되는 방법

Ajax 요청 중첩 Ajax 요청 샘플 코드

Ajax 기술을 사용하여 XMLHttpRequest 객체를 통해 홈페이지 로그인 기능 완성

위 내용은 js를 사용하여 앞뒤 간에 Json을 전송하는 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!