前端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直接提交或者在链接中拼接参数即可。

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

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

```

优质内容筛选与推荐>>
1、双网卡绑定-bond0
2、转载:sql2005 Microsoft SQL Server Management Studio Express的安装问题
3、使用Windows 2008R2中的NFS替代Samba协议,解决Windows 与Linux共享文件的问题
4、windows 线程句柄的疑问
5、2018年长沙理工大学第十三届程序设计竞赛 B-奇怪的加法


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号