ajax异步传值及后端接收参数的多种方式小结

异步传值

先来说第一种，也是最直接的方式——通过GET请求在URL后面加问号传参。

// 前台传值方法    // 触发该方法调用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路径里，后台用占位符来接收。

// 前台传值方法，其实大体与上方相同只需注意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方式把表单数据序列化后传过去。

 // 前台传值方法 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表单提交，或者在链接里拼接参数。

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

2. 后台接收参数的方式和异步完全一致，但页面跳转时还可以借助session、Model或request传值。

    // 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表达式怎么用？为什么有时候页面直接显示${dataName}？

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

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

1. 首先要明确，如果视图层全部放在WEB-INF中，那么是无法直接由jsp跳转到另一个jsp的，html同理。springboot项目推荐使用thymeleaf模板引擎。

2. 如果希望在回调成功后进行页面跳转，可以这样处理：

// 前台代码success(user){    alert("返回的用户名为:"+user.username+"!!!密码为:"+user.password);    // 在浏览器控制台打印结果，点击f12可以查看    console.log("返回的用户名为:"+user.username+"!!!密码为:"+user.password);    // 成功回调后进行跳转    window.location.href="/youWantToJumpUrl" rel="external nofollow" ;}

    // 后台代码    @RequestMapping("/youWantToJumpUrl")    public String youWantToJumpUrl() {        // 跳转到视图层        return "/youWantToJumpView";        // 重定向 return "redirect:/youWantToJumpUrl";    }

也就是说，想要跳转页面或重定向到某个方法，必须经过一次控制层。

二、