SpringBoot技术升级 thymeleaf===html+css+js+Ajax

我们的征程是星辰大海，而非人间烟尘

• • SpringBoot技术升级 thymeleaf===>html+css+js+Ajax
  • • Ajax异步请求
    • 跨域访问
    • 前后端分离技术
    • • 传递表单数据
      • 传递JSON提交数据

客户端发出请求消息后，不等待服务器的响应结果，继续执行其他操作。
Ajax：即异步 Javascript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。
插入一个博客：Ajax请求的五个步骤

任务：

1. 书写后端请求

2. 写前端页面

   • 引入JqueryCDN的链接

     http://libs.baidu.com/jquery/2.1.4/jquery.min.js
     

   • Ajax.html

     
     
     
         
         
         
     
     
     
     测试Ajax
     name
     
     
     

3. 结果
   

假如把Ajax.html当做静态资源打开，就会出现下面的问题

解决跨域问题就是在controller层加上@CrossOrigin注解，允许跨域访问

解决了跨域问题，我们就可以把HTML文件当做静态资源打开，那么你就可以解决前后端分离，前端只需要完成页面的书写，绑定数据，后端完成接口，约定统一的格式来传递数据。

• 后端代码

• 前端代码

  
  
  
      
      
      
      
  
  
  
      
  登陆
      
  
          用户名：
          
  
  
          密码：
          
  
  
          
              
          
      
  
  
  
  

• 后端代码

• 前端代码

  
  
  
      
      
      
      
  
  
  
      
  登陆
  
          用户名：
          
  
  
          密码：