Mari kita bincangkan tentang cara melaksanakan SSM untuk menyerahkan permintaan dalam JavaScript

Dalam beberapa tahun kebelakangan ini, pemisahan bahagian hadapan dan bahagian belakang telah menjadi topik hangat dalam bidang web, sebagai salah satu daripada tiga teknologi teras bahagian hadapan, membentuk seni bina pembangunan peringkat perusahaan yang lengkap , iaitu SSM, dengan Spring MVC dan Mybatis di bahagian belakang.

Di bawah seni bina ini, hujung hadapan berinteraksi dengan hujung belakang melalui permintaan http, dan teknologi yang sepadan untuk javascript ialah Ajax. Ajax bermaksud JavaScript dan XML Asynchronous, iaitu Javascript dan XML asynchronous. Ia menyokong pertukaran data dengan pelayan dan mengemas kini sebahagian daripada kandungan halaman tanpa memuatkan semula keseluruhan halaman, sekali gus meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan kaedah pelaksanaan menghantar permintaan SSM dalam JavaScript.

1. Kod bahagian hadapan

Mari kita lihat kod pelaksanaan javascript bahagian hadapan.

1. Buat objek XMLHttpRequest

Dalam javascript, anda perlu mencipta objek XMLHttpRequest terlebih dahulu dan memulakan permintaan tak segerak melalui objek ini.

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. Hantar permintaan dan proses data respons

Tetapkan kaedah permintaan, alamat permintaan, tak segerak atau parameter lain melalui kaedah terbuka objek xmlhttp, dan kemudian hantar melalui kaedah hantar tanya. Dalam fungsi panggil balik permintaan, data respons boleh diproses dengan mengubah suai elemen DOM, menukar gaya, dsb.

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. Kod bahagian belakang

Selepas bahagian hadapan memproses permintaan, bahagian belakang perlu membalas. Dalam seni bina SSM, kod back-end dilaksanakan menggunakan rangka kerja Spring MVC, di mana anotasi @ResponseBody boleh menandakan nilai pulangan kaedah Pengawal sebagai data 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. Langkah penyepaduan

1. Panggil kaedah Pengawal bahagian belakang dalam kod bahagian hadapan

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

2. Perkenalkan jQuery dan perpustakaan Berkaitan Jackson

Dalam kod bahagian belakang, perpustakaan berkaitan Jackson perlu diperkenalkan untuk menukar data 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. Konfigurasikan JavaConfig dan imbas Pengawal

Dalam fail JavaConfig Spring, konfigurasi berikut diperlukan:

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

4. Konfigurasikan DispatcherServlet Spring MVC

Konfigurasikan DispatcherServlet dalam web.xml dan petakan Servlet ke url yang ditentukan. Parameter yang perlu dikonfigurasikan ialah:

• contextConfigLocation: Tentukan laluan fail JavaConfig Spring
• : Tentukan url pemetaan DispatcherServlet
• DISPATCHER_SERVLET_NAME: Nyatakan nama 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>

Dengan menyepadukan langkah di atas, anda boleh menyerahkan permintaan melalui Javascript dalam seni bina SSM. Kelebihan kaedah ini ialah ia boleh meningkatkan pengalaman pengguna dan mencapai penyegaran separa melalui interaksi tak segerak antara hujung hadapan dan belakang tanpa memuatkan semula keseluruhan halaman, dengan itu bertindak balas dengan cepat kepada operasi pengguna.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara melaksanakan SSM untuk menyerahkan permintaan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!