JavaScript로 요청을 제출하기 위해 SSM을 구현하는 방법에 대해 이야기해 보겠습니다.

최근 웹 분야에서는 프론트엔드와 백엔드의 분리가 화두가 되고 있습니다. 자바스크립트는 프론트엔드의 3대 핵심 기술 중 하나로 완전한 전사적 수준의 개발 아키텍처를 형성합니다. 백엔드에 Spring MVC 및 Mybatis가 있는 SSM.

이 아키텍처에서 프런트 엔드는 http 요청을 통해 백엔드와 상호 작용하며, javascript에 해당하는 기술은 Ajax입니다. Ajax는 비동기 JavaScript 및 XML을 의미하며 이는 비동기 Javascript 및 XML입니다. 전체 페이지를 다시 로드하지 않고도 서버와의 데이터 교환 및 페이지 콘텐츠의 일부 업데이트를 지원하므로 사용자 경험이 향상됩니다. 이 기사에서는 JavaScript로 SSM 요청을 제출하는 구현 방법을 소개합니다.

1. 프론트엔드 코드

먼저 프론트엔드 자바스크립트 구현 코드를 살펴보겠습니다.

1. XMLHttpRequest 객체 생성

Javascript에서는 먼저 XMLHttpRequest 객체를 생성하고 이 객체를 통해 비동기 요청을 시작해야 합니다.

var xmlhttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 요청을 보내고 응답 데이터를 처리합니다

xmlhttp 객체의 open 메소드를 통해 요청 메소드, 요청 주소, 비동기 또는 기타 매개변수를 설정한 후 send 메소드를 통해 요청을 보냅니다. 요청 콜백 함수에서는 DOM 요소 수정, 스타일 변경 등을 통해 응답 데이터를 처리할 수 있습니다.

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

2. 백엔드 코드

프런트엔드가 요청을 처리한 후 백엔드가 응답해야 합니다. SSM 아키텍처에서 백엔드 코드는 Spring MVC 프레임워크를 사용하여 구현됩니다. 여기서 @ResponseBody 주석은 Controller 메서드의 반환 값을 json 데이터로 표시할 수 있습니다.

@RequestMapping(value="/getUserName",method=RequestMethod.POST)
@ResponseBody
public String getUserName(@RequestParam("userId")String userId) {
    // 处理业务逻辑，获取用户名称
    String userName = userService.findNameById(userId);
    // 返回json格式的数据
    return "{\"userName\":\"" + userName + "\"}";
}

3. 통합 단계

1. 프런트엔드 코드에서 백엔드 Controller 메서드 호출

var userId = "123";
$.ajax({
    type : 'POST',
    url : '/ssm-demo/getUserName',
    data: {"userId" : userId},
    dataType : 'json',
    success : function(data) {
        console.log(data.userName);
    }
});

2. jQuery 및 Jackson 관련 라이브러리 소개

백엔드 코드에서 json을 구현하려면 Jackson 관련 라이브러리를 도입해야 합니다. 데이터 변환.

<!-- jQuery库 -->
<dependency>
   <groupid>org.webjars</groupid>
   <artifactid>jquery</artifactid>
   <version>3.3.1</version>
</dependency>
<!-- Jackson库 -->
<dependency>
    <groupid>com.fasterxml.jackson.core</groupid>
    <artifactid>jackson-databind</artifactid>
    <version>2.9.8</version>
</dependency>

3. JavaConfig 구성 및 컨트롤러 스캔

Spring의 JavaConfig 파일에서 다음을 구성해야 합니다.

@Configuration
@ComponentScan(basePackages="com.demo.controller")
public class AppConfig {
    // ...
}

4. Spring MVC의 DispatcherServlet 구성

web.xml에서 DispatcherServlet을 구성하고 서블릿을 지정된 URL에 매핑합니다. 구성해야 하는 매개변수는 다음과 같습니다.

• contextConfigLocation: Spring의 JavaConfig 파일 경로 지정
• : DispatcherServlet의 매핑 URL 지정
• DISPATCHER_SERVLET_NAME: DispatcherServlet의 이름 지정

<servlet>
   <servlet-name>demo-dispatcher</servlet-name>
   <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
   <init-param>
       <param-name>contextConfigLocation</param-name>
       <param-value>classpath:com/demo/config/AppConfig.java</param-value>
   </init-param>
   <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>demo-dispatcher</servlet-name>
   <url-pattern>/</url-pattern>
</servlet-mapping>

By 위 단계를 통합하면 SSM 아키텍처에서 Javascript를 통해 요청을 제출할 수 있습니다. 이 방법의 장점은 전체 페이지를 다시 로드하지 않고도 프런트 엔드와 백 엔드 간의 비동기 상호 작용을 통해 사용자 경험을 향상시키고 부분 새로 고침을 달성하여 사용자 작업에 빠르게 응답할 수 있다는 것입니다.

위 내용은 JavaScript로 요청을 제출하기 위해 SSM을 구현하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!