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.mzph.cn/news/144482.shtml

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

相关文章

HackTheBox-Starting Point--Tier 2---Included

文章目录 一 Included 测试过程1.1 打点1.2 横向移动1.3 权限提升 二 题目 一 Included 测试过程 1.1 打点 1.端口扫描 nmap -sV -sC 10.129.193.212.访问web站点 3.文件包含漏洞探测 观察请求地址&#xff1a;http://10.129.193.21/?filehome.php&#xff0c;利用file参数动…

【Spring】 Spring中的IoC(控制反转)

以往在定义业务层实现时&#xff0c;在指定具体地Dao时候需要具体地定义出其实现&#xff1a; public class BookServiceImpl implements BookService{private BookDao bookDao new BookDaoImpl();public void save(){bookDao.save()} }public class BookDaoImpl implements …

只有开源才能拯救AI

导语 | 随着 AI 技术的蓬勃发展&#xff0c;大模型的开源化正成为人工智能领域的新潮流&#xff0c;但同时引发的伦理和安全风险也饱受大家关注&#xff0c;如何把握平衡其中的尺度成为开源的一大难题。我们又应该如何有效进行开源治理&#xff1f;未来将走向何方&#xff1f;今…

二叉树题目:统计二叉树中好结点的数目

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;统计二叉树中好结点的数目 出处&#xff1a;1448. 统计二叉树中好结点的数目 难度 5 级 题目描述 要求 给定一…

IEEE Standard for SystemVerilog—Chapter14. Clocking blocks

14.1 General This clause describes the following: — Clocking block declarations(时钟块声明) — Input and output skews(输入和输出偏斜) — Clocking block signal events(时钟块信号事件) — Cycle delays(周期延迟) — Synchronous events(同步事件) — Synchronous…

Ubuntu22.04离线安装uwsgi问题记录

GCC4.8安装 1、报错信息1&#xff1a; 由于缺少gcc4.8环境导致的无法安装uwsgi 解决方案&#xff1a; 离线安装GCC4.8环境, GCC4.8.5离线安装步骤如下&#xff1a; 1、下载gcc的离线安装包及其依赖包&#xff0c;链接如下&#xff1a; https://download.csdn.net/download/…

idea运行项目之后一直卡在Writing classes… 解决方案

最近遇到idea里直接运行一个Spring boot项目后&#xff0c;idea一直慢悠悠的parsing java&#xff0c;然后就writing classes&#xff0c;然后就一直卡着不动了&#xff0c;运气好10几分钟能把项目启动起来。 多年的摸鱼经验告诉我&#xff0c;事出反常必有妖&#xff0c;赶紧…

35、Flink 的 Formats 之CSV 和 JSON Format

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

使用.net 构建 Elsa Workflow

对接过蓝凌OA 也基于泛微OA数据库原型重新研发上线过产品&#xff0c;自研的开源的也上线过 每个公司对OA流程引擎介绍 都不一样的&#xff0c; 比如Elsa 这款微软MVP开源组件&#xff0c;基于跨平台开发的技术含量高&#xff0c;专门做OA的同行推过对应文章。 直接看怎么用吧。…

新版本!飞凌嵌入式RK3568系列开发板全面支持Debian 11系统

飞凌嵌入式OK3568-C/OK3568J-C开发板现已全面支持Debian 11系统&#xff0c;新系统的加持能为用户提供主控新选择&#xff0c;并为开发者带来更多开发便利&#xff01; Debian系统作为一种广受欢迎和信赖的开源操作系统&#xff0c;以其稳定性、可靠性和开放性而闻名&#xff0…

MySQL(16):变量、流程控制与游标

变量 在MySQL数据库的存储过程和函数中&#xff0c;可以使用变量来存储查询或计算的中间结果数据&#xff0c;或者输出最终的结果数据。 在 MySQL 数据库中&#xff0c;变量分为 系统变量 以及 用户自定义变量 。 系统变量 变量由系统定义&#xff0c;不是用户定义&#xff…

centos搭建docker镜像Harbor仓库的简明方法

在kubernetes集群中如果要部署springcloud这样的应用&#xff0c;就必须有一个自建的docker镜像中心仓库。 它的目的有两点&#xff1a; 1. 镜像拉取速度快 2. 开发好维护 而Harbor是一个非常好用的docker本地仓库 所以本篇文章来讲讲如何在部署Harbor仓库 首先系统版本最…

前端实现RSA非对称加密及生成RSA公私密钥

前端实现RSA非对称加密 RSA简介安装jsencryptRSA加密RSA解密如何生成公私秘钥&#xff08;windows&#xff09; RSA简介 RSA用于保密性时&#xff0c;就是公钥加密&#xff0c;私钥解密。 因为公钥是可以公开了&#xff0c; 那么任何人都可以使用公钥对信息进行加密&#xff0…

npm封装插件打包上传后图片资源错误

问题&#xff1a; npm封装插件&#xff1a;封装的组件页面涉及使用图片资源&#xff0c;在封装的项目里调用图片显示正常&#xff1b;但是打包上传后&#xff0c;其他项目引入使用报错找不到图片资源&#xff1b;图片路径也不对 获取图片的base64方法 解决方案&#xff1a; 将…

一个合格的软件测试工程师该如何提升自己

作为一名软件测试工程师&#xff0c;如何提升自己的核心竞争力&#xff1f;如何提高自己的专业水平&#xff1f; 一、持续挑战自我 没有挑战&#xff0c;便不会进步。每月给自己一个小目标&#xff0c;每季度一个大目标&#xff1b;比如&#xff0c;从纯手工测试到专项测试的转…

新手小白看过来——带你快速入门跨境电商

近几年来&#xff0c;国内外贸交易是越来越火爆&#xff0c;其中跨境电商成为了2023年的热门风口行业&#xff0c;尽管现在做跨境电商的从业者有很多&#xff0c;但仍然有许多0基础小白想通过跨境电商获取人生的第一桶金&#xff0c;那么新手应该如何在跨境电商领域取得成功呢&…

【博客系统】 一

该博客系统基于servlet和mysql数据库 , 并且通过xshell终端工具部署至云服务器. 实现的功能包括: 1.博客列表页 2.博客详情页 3.登陆页面 4.强制登陆检查 5.获取用户信息 6.退出登陆 7.发布博客 一.系统展示 登陆页面 博客列表页 博客详情页 博客编辑页 下面就开始编写代码了.…

react+video.js h5自定义视频暂停图标

目录 参考网址 效果图&#xff0c;暂停时显示暂停图标&#xff0c;播放时隐藏暂停图标 代码说明&#xff0c;代码传入url后&#xff0c;可直接复制使用 VideoPausedIcon.ts 组件 VideoCom.tsx Video.module.less 参考网址 在Video.js播放器中定制自己的组件 - acgtofe 效…

域控操作四:本地化统一壁纸切可随时更改

分两步 1&#xff0c;将壁纸发送到本地&#xff0c;2指向本地地址路径 将壁纸发送到本地 用户配置–首选项–Windows设置–文件 按图进行更改就可以将共享文件夹的图片发送到员工电脑上 2将壁纸指向刚刚设置的目的文件 用户配置–策略–管理模板–桌面–桌面 按图进行设置即…

使用UART烧录N76E003AT20核心板

目录 模块简介烧录方式利用ISP对N76E003AT20核心板进行烧录ICP烧录BootloaderISP烧录程序&#xff08;UART&#xff09;测试现象 总结 模块简介 N76E003为带有flash的增强型8位8051内核微控制器&#xff08;1T工作模式&#xff09;&#xff0c;指令集与标准的80C51完全兼容并具…