聊聊JavaScript方式提交請求SSM的實作方法

近年來，前後端分離成為web領域的熱門話題，Javascript作為前端三大核心技術之一，與後端的Spring MVC、Mybatis組成了一種完整的企業級開發架構，即SSM。

在這個架構下，前端透過http請求與後端進行交互，而javascript對應的技術就是Ajax。 Ajax全稱為Asynchronous JavaScript and XML，即非同步的Javascript和XML。它支援在不重新載入整個頁面的情況下與伺服器交換資料並更新部分頁面內容，從而提升了使用者的使用體驗。本文將介紹JavaScript方式提交請求SSM的實作方法。

一、前端程式碼

我們先來看看前端javascript的實作程式碼。

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

二、後端程式碼

前端處理完請求後，需要後端回應。在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 + "\"}";
}

三、整合步驟

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相關函式庫

在後端程式碼中，需要引入Jackson相關函式庫來實作json資料的的轉換。

<!-- 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，掃描Controller

在Spring的JavaConfig檔案中，需要進行如下配置：

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

4. #配置Spring MVC的DispatcherServlet

在web.xml中設定DispatcherServlet，將Servlet對應到指定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>

透過上述步驟的整合，即可在SSM架構中實作透過Javascript方式提交請求。這種方式的優點在於，可以提升用戶的使用體驗，在不重新載入整個頁面的情況下透過前後端異步交互，實現局部刷新，從而快速響應用戶的操作。

以上是聊聊JavaScript方式提交請求SSM的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！