SpringBoot+jquery实现post提交表单并添加隐藏域属性完成编辑功能

最新推荐文章于 2024-05-23 12:27:27 发布
最新推荐文章于 2024-05-23 12:27:27 发布
阅读量2.2k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： SpringBoot进阶 前端那些骚操作 文章标签： jquery表单提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/90900901

场景

如下页面编辑时：

在选择归属机构时会出现树形结构，所以在提交时需要额外提交一些信息，可以在form中使用input的隐藏域进行存值。

实现

html代码

<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg" id="addDiv" th:fragment="addDiv">
            <div class="modal-content animated fadeIn">
           &n
了解本专栏 订阅专栏 解锁全文
springboot提交表单
zyc1314zyc的博客
01-25 3037
  1、新增和修改公用一个页面，在跳转到该页面时传参数决定是新增还是修改。   2、前台页面表单，设置id 3、前台接受参数，决定跳转路径。同时表单序列化。     4、跳转到controller，注意表单中的name=实体类，否则controller接受不到。   5.执行插入更新的具体操作。insert为框架自带方法，可保存一个实体，null的属性也会...
jquery提交form表单数据到springboot_精通 Spring Boot 系列文（6）
weixin_36012511的博客
12-19 785
阅读全文，约 13分钟精通 Spring Boot 系列文(1)精通 Spring Boot 系列文(2)精通 Spring Boot 系列文(2)精通 Spring Boot 系列文(4)精通 Spring Boot 系列文(5)Spring Boot 文件的上传下载说真的，在 Spring Boot 实现文件下载，真的是方便到让我颤抖。Java 中实现文件上传可以用两个组件：Com...
通过js提交post隐藏表单
aoqixiaozhi的博客
03-29 3512
function postRequest(URL, PARAMS) {             var temp = document.createElement("form");             temp.action = URL;             temp.method = "post";             t
隐藏表单post提交参数方法
大伟
12-12 3995
function submit(){ $("#form2").submit(); } &lt;form id="form2" action="http://192.168.123.101:8888/xmc/j_spring_security_check" method ="post"&gt;    &lt;input id ="name" type="hidden&q
Jquery ajax post向spring mvc / springboot传递复杂对象
大尾猴的博客
03-28 3879
Jquery ajax post 像 spring mvc 传递复杂对象 今天用Jquery的ajax.post()像sprinmvc传送一个比较复杂的对象： 就是用$.post(…)这个方法传送下面的对象： public class UserRole { private String userId; private List roleReportList; /...
SpringBoot+layuimini实现角色权限菜单增删改查（layui扩展组件 dtree）
m0_46590717的博客
05-23 1101
SpingBoot 加layui实现角色资源菜单管理
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
10-22
在Web开发过程中，表单提交是一个常见的功能，通常使用JavaScript和jQuery来控制提交行为，以实现异步提交等需求。但在使用这些前端技术进行表单提交时，有时会出现无法成功提交的情况。本文主要探讨了在使用...
jQuery+ajax实现修改密码验证功能实例详解
10-19
综合来看，本实例通过结合jQuery和ajax技术，演示了如何在前端实现用户输入验证，并通过ajax请求与服务器进行数据交互，以实现一个完整的修改密码功能。代码示例简洁明了，提供了如何在客户端收集和校验数据、如何...
使用jQuery ajax提交表单代码
07-11
本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
前台利用隐藏域实现随意取值问题（Jquery）
weixin_30950607的博客
08-17 170
1.前台代码，定义一个隐藏域 <input type="hidden" id="closeWindow"/> 2.利用Jquery向隐藏域里面存值 function alarmalert(flag) { var data; if(mark==1){ data = {flag:flag,mark:1}...
springboot update数据_jquery+ajaxform+springboot控件实现数据更新功能
weixin_39582569的博客
12-21 348
应用背景使用springboot架构在如下图所示的界面布局中，实现数据的保存或者更新，务必需要提交到后台，如何进行成功或失败的提示呢？如果使用传统的springmvc的模式，势必要传一个页面给前端，这个页面仅仅是提示操作是否成功了！提示之后还得更新一下数据，就好比我们浏览某些网站的时候给出的一些提示 操作成功，5秒后返回 。比较傻，客户体验也比较差劲。改造历程使用ajax能否解决上述的问题呢？答案...
spring boot +layui快速启动登录 jq post请求
m0_50302965的博客
03-31 2352
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录准备好layui依赖或 layuiminidemo （里面lib 文件夹包含layui依赖）在springboot 项目中添加模板引擎thymeleaf在资源文件夹里创建static 和templates文件夹（正常创建项目会自带）并放入 layuiminidemo 除了page 文件夹的其他依赖文件资源修改logo.html页面把引用的连接改为thymeleaf的语法修改表单 提交完成login页面在templates文件夹里创.
Springboot通过jquery提交数据和跳转更新局部查询信息
未出笼的菜包的博客
03-03 344
前端代码 前端控件button id定义 <div class="ui action input"> <input type="text" name="username" placeholder="姓名"> <button id="search-btn" type="button" class="ui teal button">搜索</b...
jQuery请求Springboot接口时，可能遇到的多种接口类型
xia325的博客
10-26 802
1，GetMapping @GetMapping("update/{userName}/{userAge}") int updateUser(@PathVariable("userName") String userName, @PathVariable("userAge") int userAge) { return userMapper.updateUser(userName, u...
jquery动态生成隐藏域form表单并提交
it_lyy_的博客
12-27 905
jquery动态生成隐藏域form表单并提交 <a href="javascript:void(0);" onclick="toDetailPage(this, '值1', '值2')">点击链接</a> <script type="text/javascript" language="javascript"> function toDetailPage(object, param1, pramm2) { var form = $("<for
spring boot框架下$.get()、$.post()和$.ajax()的应用
hsj126716的博客
02-08 1321
目录 1.jQuery $.get() 方法 2.jQuery $.post() 方法 2.1@RequestParam 2.2@RequestBody 3.$.ajax() 3.1$.ajax()的请求类型为get 3.2$.ajax()的请求类型为post 4.github工程文件 1.jQuery $.get() 方法 $.get() 方法通过 HTTP GET 请...
springboot  使用jquery.from.js 上传文件
lengfenglin521的专栏
03-27 317
问题产生原因： IE9以下 不支持formData 所以用jQuery.from.js 插件 在使用时 发现 提交以后浏览器会提示下载文件 ,差原因是因为返回了一个页面，这不是我们想要的 解答： @RequestMapping(method = RequestMethod.POST ,value = "fileUpload",produces = "text/html;charset=u...
SpringBoot和前端数据交互（js,jQuery,thymeleaf)
热门推荐
zaincs的博客
12-13 1万+
一、后台接收URL拼接参数 后台代码： @GetMapping("/item/{code}")    //对应的链接为：/item/10001 public List&lt;Description&gt; getProduct(@PathVariable("code") String productCode) {     //your code   } 二、后台接收查询参数 后台代码： ...
Spring MVC-表单（Form）标签-隐藏字段（Hidden Field）示例（转载实践）
dxyzhbb的博客
07-11 2692
说明：示例基于Spring MVC 4.1.6。 以下示例显示如何使用Spring Web MVC框架在窗体中使用隐藏字段。首先，让我们使用Eclipse IDE，并按照以下步骤使用Spring Web Framework开发基于动态窗体的Web应用程序： 步骤 描述 1 创建一个名为HelloWeb的项目，在一个包com.tutorialspoint下，如Spring MVC - Hello W...
用js或JQUERY实现post请求并打开新的窗口
最新发布
08-04
<think>我们正在处理用户的问题：如何使用JavaScript或jQuery发起POST请求并打开新窗口。 由于HTTP协议的限制，通常我们不能直接通过打开新窗口（window.open）来发送POST请求，因为window.open通常用于GET请求。 但是，我们可以通过一些技巧来实现：例如，创建一个表单，设置表单的method为POST，target为_blank（即新窗口），然后提交表单。 另一种方法是使用AJAX POST请求获取数据，然后在新窗口中写入数据，但这种方法可能会遇到同源策略的限制，并且需要处理数据展示。 这里我们主要讨论第一种方法：使用表单提交。因为这种方法简单且兼容性好。 步骤： 1. 创建一个表单（可以动态创建） 2. 设置表单的method为POST，action为请求的URL，target为_blank（新窗口） 3. 添加需要POST的数据作为隐藏的输入字段 4. 将表单添加到DOM中 5. 提交表单 6. 提交后可以移除表单 使用jQuery可以简化这个过程，但也可以使用纯JavaScript。 另外，也可以使用window.open打开一个空白窗口，然后通过AJAX获取数据，再将数据写入新窗口。但这种方法需要处理跨域问题，且如果数据量大可能较慢。 因此，我们优先推荐表单方法。 下面分别用纯JavaScript和jQuery实现： 纯JavaScript实现： ```javascript function postAndOpenWindow(url, data) { var form = document.createElement('form'); form.method = 'POST'; form.action = url; form.target = '_blank'; // 打开新窗口 // 添加数据 for (var key in data) { if (data.hasOwnProperty(key)) { var input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = data[key]; form.appendChild(input); } } // 为了兼容性，将表单添加到body中 document.body.appendChild(form); form.submit(); document.body.removeChild(form); // 提交后移除表单 } ``` jQuery实现： ```javascript function postAndOpenWindow(url, data) { var $form = $('<form>', { method: 'POST', action: url, target: '_blank' }); // 添加数据 for (var key in data) { if (data.hasOwnProperty(key)) { $form.append($('<input>', { type: 'hidden', name: key, value: data[key] })); } } $('body').append($form); $form.submit(); $form.remove(); // 提交后移除表单 } ``` 注意：如果数据中包含嵌套对象或数组，上述方法可能不能直接处理，需要将数据扁平化或序列化。但通常我们发送的是简单键值对。 另外，如果目标URL不支持跨域，那么新窗口将显示目标URL的响应（因为表单提交是跨域的，但浏览器允许这样做，因为表单提交是传统方式，不过新窗口将显示目标URL的页面，而不是当前域）。 如果用户需要在新窗口中显示当前域的数据，那么可以考虑第二种方法：使用AJAX获取数据，然后在新窗口中写入。但这种方法要求同源或目标服务器支持CORS。 示例（同源情况）： ```javascript function postAndOpenWindowWithAjax(url, data) { // 打开一个空白新窗口 var newWindow = window.open('', '_blank'); // 发送POST请求 $.post(url, data, function(response) { // 将响应写入新窗口 newWindow.document.write(response); newWindow.document.close(); // 确保文档关闭，以便加载资源 }).fail(function() { newWindow.close(); // 如果请求失败，关闭新窗口 alert('请求失败'); }); } ``` 但是，这种方法需要同源策略允许，且新窗口可能会被广告拦截器拦截。另外，如果响应中包含外部资源（如CSS、JS），它们可能会被浏览器阻止加载（因为document.write在加载完的窗口中执行可能会覆盖整个文档，包括之前加载的资源）。因此，这种方法需要谨慎使用。 综上所述，对于大多数情况，使用表单提交是更可靠的方法。 相关问题： 1. 如何防止表单提交方法被广告拦截器拦截？ 2. 如何处理跨域POST请求并打开新窗口？ 3. 在AJAX方法中，如何确保新窗口中的样式和脚本正确加载？</think>### 使用 JavaScript/jQuery 发起 POST 请求并打开新窗口 要实现这个功能，核心思路是**创建一个隐藏表单**，通过表单提交触发新窗口打开。以下是两种实现方式： #### 方法 1：纯 JavaScript 实现 ```javascript function postToNewWindow(url, data) { // 创建隐藏表单 const form = document.createElement('form'); form.method = 'POST'; form.action = url; form.target = '_blank'; // 关键：在新窗口打开 // 添加数据字段 for (const key in data) { const input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = data[key]; form.appendChild(input); } // 提交表单 document.body.appendChild(form); form.submit(); document.body.removeChild(form); } // 使用示例 postToNewWindow('https://api.example.com/submit', { name: 'John', email: 'john@example.com' }); ``` #### 方法 2：jQuery 实现 ```javascript function postToNewWindow(url, data) { // 创建隐藏表单 const $form = $('<form>', { method: 'POST', action: url, target: '_blank' }).css('display', 'none'); // 添加数据字段 $.each(data, (key, value) => { $('<input>') .attr({ type: 'hidden', name: key }) .val(value) .appendTo($form); }); // 提交表单 $('body').append($form); $form.submit(); $form.remove(); } // 使用示例 postToNewWindow('https://api.example.com/submit', { id: 123, token: 'abcxyz' }); ``` #### 关键点说明： 1. **target="_blank"**：这是在新窗口打开的核心属性 2. **动态表单**：临时创建表单元素提交数据 3. **隐藏元素**：通过 CSS 隐藏表单避免页面闪烁 4. **自动清理**：提交后立即移除表单元素 #### 注意事项： 1. **跨域限制**：目标 URL 需支持跨域访问（CORS 配置） 2. **内容安全**：避免在 POST 数据中传递敏感信息 3. **弹窗拦截**：部分浏览器可能拦截 `window.open()`，但表单提交通常不会被拦截[^3] 4. **数据格式**：复杂数据需先序列化（如 JSON 转字符串） > 此方法通过标准表单提交实现，避免了直接使用 `window.open()` 可能被浏览器拦截的问题[^3]。对于需要处理响应的场景，建议结合 AJAX 和 `window.open()` 实现更精细的控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值