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

jlzjtz

已于 2025-05-09 09:21:15 修改

阅读量650

点赞数 4

文章标签： jquery ajax spring boot

于 2025-05-08 21:53:27 首次发布

本文链接：https://blog.csdn.net/myydnz/article/details/147805427

版权

一、前端方面：

第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 {

    @Autowired
    PersonService personService;

    @RequestMapping("/loginGo")
    @ResponseBody
    public 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 {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public 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);
    }

    @Override
    public void destroy() {

    }
}

补充一下ResultMessage工具类，这里做了个API封装：

package com.zhongji.jisuanji22.util;

public class ResultMessage<T> {
    private int code;
    private String state;
    private T data;

    public ResultMessage(int code, String state, T data){
        this.code =code;
        this.state = state;
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public String getState() {
        return state;
    }

    public Object getData() {
        return data;
    }
}

三、测试：

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