当前位置：首页 > news >正文

jquery+ajax+SpringBoot实现前后端分离技术

news 来源：原创 2025/5/9 8:20:44

一、前端方面：

第1步，在前端HTML页面的头部引入jquery

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>XXX</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>

第2步，设定要被测试的文本框的值，如：

<input type="text" class="input_text fl" id="testdata" name="testdata" value="book" placeholder="搜索商品"><a href="javascript:ajaxtest();">触发事件链接</a>

第3步，写入ajax代码：

<script type="text/javascript">function ajaxtest(){var t = $("#testdata").val();// alert(t);$.ajax({type: "POST",	url: "http://localhost:8080/demo/loginGo",data:{username:t},dataType: "json",success: function(data) {console.log(data);// alert(data.data[0].username);// location.href="detail.html"window.open("detail.html","_self");//请求成功后回调函数},error: function(jqXHR){alert(jqXHR);//请求失败后回调函数}});}</script>

其中，返回的detail.html为你要跳转的页面，这个可以根据自己的业务自行决定是否跳转或跳转到哪里。

一、后端方面：

第1步，自定义一个实体类，如Person类：

public class Person {private int id;private String username;private String password;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}

第2步，自定义一个控制类，如：

@Controller
@RequestMapping("/demo")
public class JNTestDemo {@AutowiredPersonService personService;@RequestMapping("/loginGo")@ResponseBodypublic ResponseEntity<ResultMessage<Person>> loginGo(@ApiParam Person person){System.out.println(person.getUsername());List<Person> flag = personService.login();ResultMessage<Person> resultMessage = new ResultMessage(200,"成功",flag);return ResponseEntity.ok().body(resultMessage);}
}

这里业务逻辑层就省略啦，无非就是查询出一个集合，自行补全吧。

第3步，自定义一个跨域的配置类，如：

package com.zhongji.jisuanji22.config;import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** 跨域配置类*/@Component
public class SimpleCORSFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest reqs = (HttpServletRequest) req;String curOrigin = reqs.getHeader("Origin");HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");response.setContentType("application/json;charset=UTF-8");chain.doFilter(req, res);}@Overridepublic void destroy() {}
}

三、测试：

我们把后台SpringBoot运行起来，默认端口是8080，把前端页面放入到nginx中，然后访问被测试的页面，点击触发ajax函数的事件，即可访问后台了。如访问地址：http://localhost/index.html。访问后观察控制台的输出，发现值已经传过来了，证明前后端分离数据交互没有问题。