ajax异步传值|前后台传值|EL表达式

在这里小小推荐下我的个人博客

csdn:雷园的csdn博客

个人博客:雷园的个人博客

:雷园的

某宝优惠:优惠网站

写在前面

昨天发布了一篇关于ajax异步的文章,今天好多人私信我关于ajax前后台数据传递的问题。我就给大家出一篇关于前后台数据传递的文章,希望大家多多支持!!!

异步传值

前台往后台传值呢,有很多种方式,大家听我细细道来。

  1. 第一种呢,也是最简单的一种,通过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";
        }
    
  2. 第二种呢,是将参数体现到链接中,在后台通过占位进行传递。

    // 前台传值方法,其实大体与上方相同只需注意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";
        }
    
  3. 第三种呢,通过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";
        }
    
  4. 第四种呢,就是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直接提交或者在链接中拼接参数即可。


问号传递参数 拼接链接传递参数

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表达式的作用是什么呢,就是为了配合后台传递过来的数据,让他们有机会展示到大家面前。



<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

    
        
        
    

异步请求完成后如何进行跳转?

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";
    }

也就是说,如果想要跳转页面或者重定向到某一个方法,必须经过一次控制层才能实现。

结束语

这篇文章就到这里,非常感谢大家的关注,如果有什么问题不明,可以私信或者评论告诉我,我会一一回复。再次感谢大家!!!

你可能感兴趣的:(ajax异步传值|前后台传值|EL表达式)