json 원리 분석 및 예제 소개_javascript 기술

이번에는 프로젝트의 프런트엔드와 백엔드 간의 데이터 상호작용에 json을 사용했습니다. 이번 사용 기간을 통해 json에 대한 전반적인 이해와 간략한 요약을 갖게 되었습니다.
JSON: JavaScript 객체 표기법.
JSON은 텍스트 정보를 저장하고 교환하는 구문입니다. XML과 유사합니다.
JSON은 XML보다 더 작고 빠르며 구문 분석하기 쉽습니다.
XML과 마찬가지로 JSON도 일반 텍스트 기반 데이터 형식입니다. JSON은 본질적으로 JavaScript용으로 준비되어 있으므로 JSON을 사용하여 간단한 문자열, 숫자, 부울, 배열 또는 복잡한 개체를 전송할 수 있습니다.
먼저 컨트롤러의 코드를 살펴보세요. 가장 중요한 것은 데이터베이스에서 쿼리한 데이터가 어떻게 json 형식으로 출력되는지 살펴보는 것입니다.
[java]

코드 복사 코드는 다음과 같습니다.

@RequestMapping( "/work /plan/checkSubmitForApproval")
public void checkSubmitForApproval(String planId,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
String result="{"result":"faild","personSituation":"null "}" ;
HttpSession 세션 = request.getSession();
String industryID = (String) session.getAttribute("industryID")
IIndustry industry = industryService.getById(industryID); if(industry .getType().equals("XXX")){
try {
boolean flag = false;
IProjectMain yearPlan = projectPlanService.findProjectPlanById(planId)
List = sysStaffService.getStaffByPlanId(planId, industryID);
for(int i=0;iif(listStaffInfo.get(i).getPractitionersPost().equals(StaffRole .PROGECTMANAGER.toString())){
flag = true;
}
}
if(flag == true){
result="{"result":"success", "personSituation":"" yearPlan.getPerson_Situation() ""}";
}else{
result="{"result":"success","personSituation":"" yearPlan.getPerson_Situation() "" ,"isManager ":"false"}";
}
} catch(예외 e) {
result="{"result":"falid"}";
throw new PlatformException(e );
}마지막으로{
OutputUtils.write(response,result,"text/x-json;charset=UTF-8")
}

먼저 PutputUtils를 입력하세요. 코드 작성 : [java]

코드 복사 코드는 다음과 같습니다.

public static void write(HttpServletResponse response, String text, String contentType)
{
PrintWriter out=null;
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0)
response.setContentType(contentType); >{
out = response.getWriter();
out.write(text);
}
catch(IOException e)
{
Logger.getLogger(OutputUtils.class) .error(e.getMessage(), e); 마침내{
if(out!=null){
out.flush()
out.close(); }
}
}


응답의 인쇄기를 가져와서 출력할 정보를 설정하는 아이디어입니다. 반환된 정보를 확인하려면 인터페이스 계층에서 jquery의 Post를 사용하세요.
[javascript]

코드 복사

코드는 다음과 같습니다. function distribution(){ var dplanId = $(".currli").attr("id") if(dplanId != "") {

$.ajax({

type : "POST",
url : 확인을 위한 작업 URL,
dataType : "json",
success : function(data) {
//HAVE 상태가 할당됩니다
if (data.result == "success" && data.personSituation == "UNHAVE") {
with (document.getElementById("planForm")) {
action=확인 후 제출할 URL
submit()
span>}


성공: function(data)은 위의 확인 작업 방법이 성공한 후 수행되는 작업인 콜백 함수입니다. jquery 사용 방법에 대한 자세한 내용을 보려면 여기를 클릭하세요. >jquery의 게시물 제출을 이해하지 못하는 학생들은 여기를 클릭하여 알아보세요.
Ajax와 jquery의 역사에 대해서는 Wikipedia를 참조하는 것이 좋습니다.
jquery는 이미 작업에서 데이터를 가져오므로 여기에서 사용하는 것이 매우 편리하며 XML에서 조금씩 읽어야 하는 번거로움을 없애고 개발에 큰 편의를 제공합니다
.