原文参考

异步传值

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

第一种呢,也是最简单的一种,通过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";
}

前端ajax异步传值以及后端接收参数的几种方式的更多相关文章

  1. ssh框架总结之action接收参数的三种方式

    页面将参数传递给action的三种方式 一是通过属性传值: 将页面和action的的属性值保持一致,在action上写上该属性的set和get方法,这样在页面提交参数的时候,action就会调用set ...

  2. SpringBoot Controller接收参数的几种方式盘点

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:SpringBoot Controller接收参数的几种方式盘点: SpringBoot Controller接收参数的几种常用方式盘点 ...

  3. Struts2接收参数的几种方式

    一.用Action属性 在action里定义要接收的参数,并提供相应的set和get方法. 如: public class LoginAction extends ActionSupport { pr ...

  4. strut2接收参数的三种方式

    strut2接收参数有三种方式(普通属性\领域对象\模型驱动),分别对三种进行一个总结: 一.普通属性 Jsp代码 <body> <h1>普通属性</h1> < ...

  5. PHP接收参数的几种方式

    PHP5在默认的情况下接收参数是需要使用 $_GET['value']; $_POST['value']; 还可以在PHP.ini 文件中的  将register_globals = Off  改re ...

  6. spring-boot-route(一)Controller接收参数的几种方式

    Controller接收参数的常用方式总体可以分为三类.第一类是Get请求通过拼接url进行传递,第二类是Post请求通过请求体进行传递,第三类是通过请求头部进行参数传递. 1 @PathVariab ...

  7. ASP.NET MVC post请求接收参数的三种方式

    1.在控制器中建立一个PostDemo方法,建立视图创建一个表单 <h2>PostDemo</h2> name的值:@ViewBag.name <br /> nam ...

  8. .NET MVC框架中控制器接收参数的四种方式

    1.通过路由中的配置的参数名字直接接收(要求:两者同名) routes.MapRoute(                 name: "Default",             ...

  9. springMVC接收参数的几种方式

    Spring3 MVC请求参数获取的几种方法 一.      通过@PathVariabl获取路径中的参数 @RequestMapping(value="user/{id}/{name}&q ...

随机推荐

  1. 51Nod 1521 一维战舰

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1521 思路:先计算出一开始最多能放多少艘战舰,然后每次输入一个点后,找到 ...

  2. nmap 端口扫描王,查看端口是否可访问,是否对外开放

    NMap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包. 1 安装 apt-get install nmap 2 使用,查看ip下所有对外的端口 $ sudo nmap ...

  3. C#显示接口实现和隐式接口实现

    在项目中可能会遇到显示接口实现和隐式接口实现.什么意思呢?简单来说使用接口名作为方法名的前缀,这称为“显式接口实现”:传统的实现方式,称为“隐式接口实现”.隐式接口实现如下: interface IS ...

  4. scp 上传 下载 文件

    linux 中的ssh命令: scp 可以用来上传本地文件到远程服务器 或下载远程服务器中的文件到本地 1. 上传本地文件到远程服务器 scp readme.md user@www.*****.com ...

  5. setTimout执行时间

    在浏览器中,JavaScript引擎是单线程执行的.也就是说,在同一时间内,只能有一段代码被JavaScript引擎执行.页面加载时,JavaScript引擎会顺序执行页面上所有JavaScript代 ...

  6. spoj-ASSIGN-bitDP

    ASSIGN - Assignments #dynamic-programming Problem Your task will be to calculate number of different ...

  7. fio使用

    关于lat(I/O completion latency).clat(complete latency).slat(summit latency): lat is the total latency. ...

  8. Java内存状况查看方法和分析工具

    Java本身提供了多种丰富的方法和工具来帮助开发人员查看和分析GC及其JVM内存的状况,同时开源界也有一些工具用于查看和分析GC和JVM内存的状况. 通过这些分析,可以排查程序中内存泄露的问题及调优程 ...

  9. 一、html <!doctype>标签

    一.html <!doctype>标签 定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYP ...

  10. 【LeetCode 67_字符串_算术运算】Add Binary

    string addBinary(string a, string b) { int alen = a.size(); int blen = b.size(); ) return b; ) retur ...