Parlons de la façon d'implémenter SSM pour soumettre des requêtes en JavaScript

Ces dernières années, la séparation du front-end et du back-end est devenue un sujet brûlant dans le domaine du Web, car l'une des trois technologies de base du front-end forme une architecture de développement complète au niveau de l'entreprise. SSM, avec Spring MVC et Mybatis en back-end.

Dans cette architecture, le front-end interagit avec le back-end via des requêtes http, et la technologie correspondante pour javascript est Ajax. Ajax signifie Asynchronous JavaScript and XML, qui est du Javascript et du XML asynchrones. Il prend en charge l'échange de données avec le serveur et la mise à jour d'une partie du contenu de la page sans recharger la page entière, améliorant ainsi l'expérience utilisateur. Cet article présentera la méthode d'implémentation de soumission de requête SSM en JavaScript.

1. Code front-end

Jetons d'abord un coup d'œil au code d'implémentation javascript front-end.

1. Créer un objet XMLHttpRequest

En javascript, vous devez d'abord créer un objet XMLHttpRequest et lancer une requête asynchrone via cet objet.

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. Envoyez la demande et traitez les données de réponse

Définissez la méthode de demande, l'adresse de la demande, les paramètres asynchrones ou autres via la méthode ouverte de l'objet xmlhttp, puis envoyez la demande via la méthode d'envoi. Dans la fonction de rappel de requête, les données de réponse peuvent être traitées en modifiant les éléments DOM, en changeant les styles, etc.

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. Code back-end

Une fois que le front-end a traité la demande, le back-end doit répondre. Dans l'architecture SSM, le code back-end est implémenté à l'aide du framework Spring MVC, où l'annotation @ResponseBody peut marquer la valeur de retour d'une méthode Controller en tant que données 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. Étapes d'intégration

1. Appelez la méthode du contrôleur backend dans le code front-end

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

2. Introduisez les bibliothèques liées à jQuery et Jackson

Dans le code backend, vous devez introduire les bibliothèques liées à Jackson pour implémenter json Convertir les données.

<!-- 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. Configurez JavaConfig et analysez Controller

Dans le fichier JavaConfig de Spring, vous devez configurer les éléments suivants :

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

4. Configurez le DispatcherServlet de Spring MVC

Configurez DispatcherServlet dans web.xml et mappez le servlet à l'URL spécifiée. Les paramètres qui doivent être configurés sont :

• contextConfigLocation : Spécifiez le chemin du fichier JavaConfig de Spring
•  : Spécifiez l'URL de mappage de DispatcherServlet
• DISPATCHER_SERVLET_NAME : Spécifiez le nom de 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 en intégrant les étapes ci-dessus, vous pouvez soumettre des requêtes via Javascript dans l'architecture SSM. L'avantage de cette méthode est qu'elle peut améliorer l'expérience utilisateur et obtenir un rafraîchissement partiel grâce à une interaction asynchrone entre le front-end et le back-end sans recharger la page entière, répondant ainsi rapidement aux opérations de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!