在这里小小推荐下我的个人博客
csdn：雷园的csdn博客
个人博客：雷园的个人博客
简书：雷园的简书
某宝优惠：优惠网站
写在前面
昨天发布了一篇关于ajax异步的文章，今天好多人私信我关于ajax前后台数据传递的问题。我就给大家出一篇关于前后台数据传递的文章，希望大家多多支持！！！
异步传值
前台往后台传值呢，有很多种方式，大家听我细细道来。
-
第一种呢，也是最简单的一种，通过get提交方式，将参数在链接中以问号的形式进行传递。
// 前台传值方法 // 触发该方法调用ajax function testAjax(yourData) { $.ajax({ type: "get", // 以get方式发起请求 url: "/yourUrl?yourDataName=" + yourData, // 将你的请求参数以问号拼接到url中进行参数传递 success(data) { // data为返回值 // 成功后的回调方法 } }) }// 后台接值方法 @RequestMapping("/yourUrl") @ResponseBody // @RequestParam("yourData")是必不可少的，因为他指定了链接中的参数名称 public String yourUrl(@RequestParam("yourData") String yourData) { System.out.println(yourData); // 返回值可以自由定义 return "SUCCESS"; } -
第二种呢，是将参数体现到链接中，在后台通过占位进行传递。
// 前台传值方法，其实大体与上方相同只需注意url即可 // 触发该方法调用ajax function testAjax(yourData) { $.ajax({ type: "get", // 以get方式发起请求 url: "/yourUrl/"+yourData, // 将你的请求参数拼接到url中进行参数传递 success(data) { // data为返回值 // 成功后的回调方法 } }) }// 后台接值方法 @RequestMapping("/yourUrl/{yourDataName}") @ResponseBody // 同样@PathVariable("yourDataName")必不可少，因为他指定链接中某个位置代表着名为yourDataName的变量 public String yourUrl(@PathVariable("yourDataName") String yourData) { System.out.println(yourData); // 返回值可以自由定义 return "SUCCESS"; } -
第三种呢，通过post提交方式将form表单中的数据序列化后传递到后台。
// 前台传值方法 function testAjax() { $.ajax({ type: "post", // 以post方式发起请求 url: "/yourUrl", // 你的请求链接 data:$("#myForm").serialize(), // 对id为myForm的表单数据进行序列化并传递到后台 success(data) { // data为返回值 // 成功后的回调方法 } }) }// 后台接值方法 @RequestMapping("/yourUrl") @ResponseBody // 在这里我假设大家表单数据与User实体类相对应 public String yourUrl(User user) { System.out.println(user.toString()); return "SUCCESS"; } -
第四种呢，就是Ajax异步传值最常见的在ajax方法体中使用data进行传值。
// 前台传值方法 function testAjax() { $.ajax({ type: "post", // 以post方式发起请求 url: "/yourUrl", // 你的请求链接 data: { // 提交数据 "username": "admin", // 前者为字段名，后者为数据 "password": "admin" }, success(data) { // data为返回值 // 成功后的回调方法 } }) }// 后台接值方法 @RequestMapping("/yourUrl") @ResponseBody // 在这里我假设大家表单数据与User实体类相对应 public String yourUrl(@RequestParam("username") String username, @RequestParam("password") String password) { System.out.println("username="+username+";password="+password); return "SUCCESS"; }
后台往前台传值就要简单一些，单个数据或者封装数据可以直接使用return返回json数据给前台，如果是多个数据，可以使用PrintWriter进行传值，具体操作如下
PrintWriter out = response.getWriter();
try {
out.write("yourWillReturnData");
} catch (Exception e) {
e.printStackTrace();
}finally{
out.close();
}
// 无论通过那种方式，只需在前台Ajax得success回调方法中对数据进行处理即可,我们以user为例
success(user){
alert("返回的用户名为:"+user.username+"!!!密码为:"+user.password);
// 在浏览器控制台打印结果，点击f12可以查看
console.log("返回的用户名为:"+user.username+"!!!密码为:"+user.password);
}
非异步方式传值
非异步方式前台传递参数
1.与异步方式类似，使用form直接提交或者在链接中拼接参数即可。
<!-- form表单提交 -->
<form id="myForm" class="layui-form" action="/yourUrl" method="post">
<input type="text" name="username" required placeholder="邮箱"/>
<input type="password" name="username" required placeholder="密码"/>
<button type="submit" class="layui-btn">登录</button>
</form>
<!-- a标签拼接参数 -->
<a href="/yourUrl?youDataName=yourData">问号传递参数</a>
<a href="/yourUrl/yourData">拼接链接传递参数</a>
2.后台接受参数方式不变，与异步方式完全相同。
非异步方式后台向前台传递数据
// 1.可以通过session进行参数传递
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通过request获取session，然后向session中放入参数key-value
request.getSession().setAttribute("yourDataName", "yourData");
// 跳转到你的视图
return "/yourViews";
}
// 2.可以通过Model进行参数传递
@RequestMapping("/yourUrl")
public String yourUrl(Model model) {
// 向model中加入参数key-value
model.addAttribute("yourDataName", "yourData");
// 跳转到你的视图
return "/yourViews";
}
// 3.同样可以用request进行参数传递
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通过request放入参数key-value
request.setAttribute("yourDataName", "yourData");
// 跳转到你的视图
return "/yourViews";
}
EL表达式怎么用？为什么EL表达式不起作用，页面展示为${dataName}？
1.首先EL表达式不起作用可能是你创建的jsp或者html版本比较高，他自动禁用了el表达式，需要手动开启。你只需要在你的视图层增加这样一段代码。
<%@ page isELIgnored="false" %>
2.EL表达式的作用是什么呢，就是为了配合后台传递过来的数据，让他们有机会展示到大家面前。
<!-- 我们在这里以c标签的for循环为例做演示 -->
<!-- 首先导入c标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 编写foreach循环-->
<c:forEach items="${userList}" var="user">
<input type="text" name="username" value="${user.username}"/>
<input type="text" name="password" value="${user.password}"/>
</c:forEach>
异步请求完成后如何进行跳转？
1.首先要明确，如果你的视图层全部放在WEB-INF中，那么你的视图层是无法直接进行跳转的，也就是说你不能由一个jsp跳转到另一个jsp，html同理。springboot项目也是一样，如果你是springboot项目，推荐使用thymeleaf模版引擎。
2.如果你希望在回调成功之后进行页面跳转，可以通过如下代码实现：
// 前台代码
success(user){
alert("返回的用户名为:"+user.username+"!!!密码为:"+user.password);
// 在浏览器控制台打印结果，点击f12可以查看
console.log("返回的用户名为:"+user.username+"!!!密码为:"+user.password);
// 成功回调后进行跳转
window.location.href="/youWantToJumpUrl";
}
// 后台代码
@RequestMapping("/youWantToJumpUrl")
public String youWantToJumpUrl() {
// 跳转到视图层
return "/youWantToJumpView";
// 重定向 return "redirect:/youWantToJumpUrl";
}
也就是说，如果想要跳转页面或者重定向到某一个方法，必须经过一次控制层才能实现。
结束语
这篇文章就到这里，非常感谢大家的关注，如果有什么问题不明，可以私信或者评论告诉我，我会一一回复。再次感谢大家！！！🙏
