ajax异步传值以及后端接收参数的几种方式

 异步传值

第一种呢,也是最简单的一种,通过get提交方式,将参数在链接中以问号的形式进行传递

// 前台传值方法    
// 触发该方法调用ajaxfunction 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即可
// 触发该方法调用ajaxfunction 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-valuerequest.getSession().setAttribute("yourDataName", "yourData");// 跳转到你的视图return "/yourViews";}// 2.可以通过Model进行参数传递@RequestMapping("/yourUrl")public String yourUrl(Model model) {// 向model中加入参数key-valuemodel.addAttribute("yourDataName", "yourData");// 跳转到你的视图return "/yourViews";}// 3.同样可以用request进行参数传递@RequestMapping("/yourUrl")public String yourUrl(HttpServletRequest request) {// 通过request放入参数key-valuerequest.setAttribute("yourDataName", "yourData");// 跳转到你的视图return "/yourViews";}

EL表达式怎么用?为什么EL表达式不起作用,页面展示为${dataName}? 

 

<!-- 我们在这里以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";}

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

 

 

 

 

参考链接 ajax异步传值|前后台传值|EL表达式 - 简书 (jianshu.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/178954.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx + RTMP + nginx-http-flv-module 环境搭建(CentOS 7)

文章目录 1. 引言2. 安装 Nginx3. 安装依赖库4. 下载编译 Nginx with RTMP 模块5. 配置 Nginx6. 启动 Nginx7. 推流测试8. 播放测试9. 拓展9.1 鉴权配置9.2 HTTPS 配置9.3 安全性配置 10. 小结 &#x1f389;Nginx RTMP nginx-http-flv-module 环境搭建&#xff08;CentOS 7&…

浙江大学数据结构陈越 第一讲 数据结构和算法

数据结构 数据结构是计算机科学中用来组织和存储数据的方式。它可以理解为一种组织数据的方式&#xff0c;能够有效地管理和操作数据&#xff0c;以及提供对数据进行存储、检索、更新和删除等操作的方法。常见的数据结构包括数组、链表、栈、队列、树和图等&#xff0c;它们各自…

【原创】java+swing+mysql车辆维修管理系统设计与实现

摘要&#xff1a; 车辆维修管理系统是一个用于管理和追踪车辆维修过程的系统&#xff0c;它能够提高效率&#xff0c;减少错误&#xff0c;并提供详细的车辆历史记录&#xff0c;可以帮助车辆维修企业实现信息化管理&#xff0c;提高工作效率和客户满意度&#xff0c;降低运营…

kubernetes集群编排(10)

目录 prometheus监控 部署prometheus 部署nginx监控实例 部署prometheus-adapter prometheus监控 部署prometheus 创建项目仓库并上传镜像 [rootk8s2 helm]# vim prometheus-values.yaml alertmanager:alertmanagerSpec:image:repository: prometheus/alertmanagertag: v0.24.0…

OpenAI发布会震撼AI界,千字文全面解读

你的朋友圈是否被近日 OpenAI 的开发者大会刷屏了&#xff1f;这是预料之中的事。在近日&#xff0c;OpenAI 首度召开了旨在定义未来应用市场的开发者大会。 让我们迅速捕捉 OpenAI 最新的动态以及 ChatGPT 的更新亮点。 1、OpenAI 最新动态 今晨的盛会聚焦于以下要点&#xf…

什么是自动化测试框架?常用的自动化测试框架有哪些?

无论是在自动化测试实践&#xff0c;还是日常交流中&#xff0c;经常听到一个词&#xff1a;框架。之前学习自动化测试的过程中&#xff0c;一直对“框架”这个词知其然不知其所以然。 最近看了很多自动化相关的资料&#xff0c;加上自己的一些实践&#xff0c;算是对“框架”…

LeetCode - 141. 环形链表 (C语言,快慢指针,配图)

141. 环形链表 - 力扣&#xff08;LeetCode&#xff09; 1. 什么是快慢指针 这里我们我们将介绍环形链表的经典解法——快慢指针&#xff0c;简单理解&#xff0c;指针移动快的叫做快指针fast&#xff0c;移动速度慢的叫慢指针slow。一般我们设快指针走两步&#xff0c;慢指针走…

Spring6(一):入门案例

文章目录 1. 概述1.1 Spring简介1.2 Spring 的狭义和广义1.3 Spring Framework特点1.4 Spring模块组成 2 入门2.1 构建模块2.2 程序开发2.2.1 引入依赖2.2.2 创建java类2.2.3 创建配置文件2.2.4 创建测试类测试 2.3 程序分析2.4 启用Log4j2日志框架2.4.1 引入Log4j2依赖2.4.2 加…

编译智能合约以及前端交互工具库(Web3项目一实战之三)

我们已然在上一篇 Web3项目灵魂所在之智能合约编写(Web3项目一实战之二) ,为项目写好了智能合约代码。 但身为开发人员的我们,深知高级编程语言所编写出来的代码,都是需要经过编译,而后外部方能正常调用。很显然,使用solidity这门新的高级编程语言编写出来的智能合约,也…

【前端】使用json-server报错

当我们使用json-server模仿后端接口时需要运行json-server --watch index.json这个命令生成增删改查接口但是可能会报这个错误&#xff0c;如图 这时我们运行 npm i json-server -g命令即可&#xff0c;然后再重新运行json-server --watch index.json就行了

Linux学习第41天:Linux SPI 驱动实验(二):乾坤大挪移

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 本章的思维导图如下&#xff1a; 二、I.MX6U SPI主机驱动分析 主机驱动一般都是由SOC厂商写好的。不作为重点需要掌握的内容。 三、SPI设备驱动编写流程 1、SP…

Oracle(17)Managing Roles

目录 一、基础知识 1、基础介绍 2、Predefined Roles 预定义的角色 3、各种角色的介绍 二、基础操作 1、创建角色 2、修改用户默认role 3、回收role 4、删除role 5、为角色授权 6、授予角色给用户 7、查看用户包含的角色&#xff1a; 8、查看角色所包含的权限 9、…