html页面表单传值跳转,如何在网页中POST任意内容并跳转

最新推荐文章于 2022-07-21 15:14:01 发布
最新推荐文章于 2022-07-21 15:14:01 发布
阅读量936 收藏 1
点赞数
文章标签： html页面表单传值跳转

之前是用jQuery的post()方法实现向服务器POST数据.

现在新需求需要呈现服务器返回的HTML页面.这个呈现是类似于普通form提交后跳转的过程.

解释:

使用表单进行POST的方法

点击Submit 就可以向"/B"POST数据并跳转到B页面

Ajax方法

$.post("/B",{"foo":"bar"})

这种方法能够POST自定义数据但是不能够跳转到B页面

现在的需求:

用JavaScript 控制POST的数据内容并跳转到B页面,类似ExtJS的standardSubmit功能

需求决定我们不能在页面上使用form来提交数据.因为提交的数据是页面上几个Div的全部HTML内容(实际上是富文本编辑器).使用jQuery的.html()方法取得这些HTML内容.

现在想到的思路是使用jQuery 在内存中建立一个form对象,然后调用这个对象的submit方法

form = $("

")

str = $("#bar").html()

input = $("").val(str).attr('name','bar')

form.append(input)

//....继续添加字段

form.submit()

上面这种方法虽然能用,但是感觉很丑,有没有更好的方法?

weixin_39947812
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
j两个html网页间post传参,使用 postMessage 在跨域页面间传数据
weixin_32099979的博客
06-22 765
搞了几个微服务，各自都有后端数据和前端页面，不同服务都需要获取主服务提供的 JWT 令牌信息用于后端的用户鉴权。由于主服务和各个微服务之间都是配置为不同的端口，属于跨域页面之间的信息传递，可以使用 window.postMessage 方法安全地实现跨源通信。1. 语法：1.1. 发送方调用otherWindow.postMessage(message, targetOrigin, [transf...
html js POST提交跳转页面
weixin_46124208的博客
06-01 783
/** * 采用post方式跳转 * @param URL * @param PARAMS json格式数据 {html :prnhtml,cm1:'测试',cm2:'haha'} * @returns {Element} */ function post(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; temp.method = "post"; temp.st
H5学习笔记1：HTML5与HTML4的区别
weixin_42583552的博客
10-17 309
1. HTML5推出的理由 解决Web上存在的问题： Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。 原因：各浏览器规范不统一，没有被标准化。 解决方案：使各浏览器的功能符合通用标准。 文档结构不够明确：HTML4中元素不能把文档结构表示清楚。 解决方案：增加与结构相关的元素。 Web应用程序的功能受到限制：HTMLL4对Web应用程序的贡献很小，比如：不允许同时上传多个文件。 解决方案：提供供Web应用程序使用的API。
松哥手把手教你定制 Spring Security 中的表单登录
江南一点雨的专栏
03-30 4376
Spring Security 系列继续。 前面的视频+文章，松哥和大家简单聊了 Spring Security 的基本用法，并且我们一起自定义了一个登录页面，让登录看起来更炫一些！ 今天我们来继续深入这个表单配置，挖掘一下这里边常见的其他配置。学习本文，强烈建议大家看一下前置知识（松哥手把手带你入门 Spring Security，别再问密码怎么解密了），学习效果更佳。 1.登录接口 很多初学者...
html两个页面跳转时传递参数location.search
CHEN的技术积累
08-30 3901
html两个页面跳转时传递参数location.search
JS使用POST方式跳转HTML页面
培根芝士的专栏
07-21 3402
模拟FORM表单来提交POST请求。
layui使用form表单实现post请求页面跳转的方法
10-16
本文将详细介绍如何使用layui的form表单实现POST请求并进行页面跳转，以确保数据安全且避免信息泄露。 通常，通过`window.location.href`的方式添加参数进行页面跳转会将数据暴露在URL中，这可能带来安全风险。为了...
vue 解决form表单提交但不跳转页面的问题
10-16
在Vue.js框架中，表单提交是一个常见的交互行为，但默认情况下，HTML的`<form>`元素在提交时会向其`action`属性指定的URL发送数据并导致页面重载或跳转。在某些场景下，如AJAX提交或者希望在当前页面处理提交的数据...
html页面跳转传递参数问题
09-28
本篇文章将详细探讨如何在HTML页面跳转时传递参数，并以提供的代码示例为依据进行解析。 首先，让我们来看一下在A页面上实现跳转的代码。A页面包含两个元素，一个表示名字（`<div id="name">tony</div>`），另一个...
Ajax post请求跳转页面
10-20
在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在某些场景下，我们需要在发送Ajax POST请求后根据服务器...
html5页面表格固定列与表格内数据跳转功能
09-27
html5表格引用了amazeui框架的css样式，固定列问题就有点问题，后来引用了tablefreeze的工具，可顺利完成固定列滑动。关于表格内数据跳转运用了location。href="##"跳转，如果要传参数可在后面加上"?a=1"，通过中间java 代码传递。
在Js页面通过POST传递参数跳转到新页面详解
12-02
最近在工作中遇到一个需求，有个页面 a.vm，对 ajax 请求的结果进行判断后，获取结果里面的数据传递给一个 URL（b.htm），跳转到新的页面 b.htm。 遇到的问题 因为一开始是 GET 请求，所以当传递的数据过大的时候，...
html页面之间传递对象,HTML5中使用postMessage实现两个网页间传递数据
weixin_39936558的博客
06-03 603
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。数据发送端首...
html提交成功跳转页面,提交表单后跳转到想要的页面--jQuery form
热门推荐
weixin_35794520的博客
06-03 1万+
表单提交的问题一直困扰着我这个新手，现在也算学习了不少，解决了我现在有的问题 —— 提交了表单之后将数据给到后台并且让前端页面跳转到想要的页面或出现想要的内容。用到了 jQuery Form Plugin，表单提交的第三方插件，为了更方便的管理和提交表单。(官网：http://plugins.jquery.com/form/)借鉴：https://blog..net/m0_37505854/art...
html中跨页面通讯方式,[转]html5: postMessage解决跨域和跨页面通讯的问题
weixin_31175771的博客
06-03 271
平时作web开发的时候关于消息传递，除了客户端与服务器传值，还有几个常常会遇到的问题：html多窗口之间消息传递(newWin = window.open(..));页面与嵌套的iframe消息传递postMessage方法postMessage是html5引入的API能够更方便、有效、安全的解决这些问题。postMessage()方法容许来自不一样源的脚本采用异步方式进行有限的通讯，能够实现跨文...
前端之使用 POST 提交数据并跳转
fenglepeng的博客
03-08 3689
GET 方式 window.location.href是我们常用来在js中实现页面跳转的方法，这是使用get方式发送请求，示例如下 window.location.href = url; 优点是简单易用，缺点是如果有参数的话，参数会暴露在url地址中，这降低了系统的安全性，也影响用户体验。 POST 方式 通过模拟表单提交的方式进行跳转 // 发送POST请求跳转到指定页面 function httpPost(URL, PARAMS) { var temp = document.createEleme
html post后不跳转页面,在页面中post内容并跳转
weixin_35901163的博客
06-03 2188
之前是用jQuery的post()方法实现向服务器POST数据，请求结束后还是在本页面。现在新需求是请求结束后需要跳转到服务器返回的HTML页面，这个类似于普通form提交后跳转的过程。使用表单进行POST的方法点击Submit 就可以向"/B"POST数据并跳转到B页面Ajax方法$.post("/B",{"foo":"bar"},function(){window.location.href=...
html前端发送post不起作用,【Web前端问题】如何在网页中POST任意内容并跳转
weixin_39610085的博客
06-17 899
之前是用jQuery的post()方法实现向服务器POST数据.现在新需求需要呈现服务器返回的HTML页面.这个呈现是类似于普通form提交后跳转的过程.解释:使用表单进行POST的方法点击Submit 就可以向”/B”POST数据并跳转到B页面Ajax方法$.post("/B",{"foo":"bar"})这种方法能够POST自定义数据但是不能够跳转到B页面现在的需求:用JavaScript 控...
HTML页面处理post请求返回,发送新的HTML页面并在从原始页面发出POST请求后向其发出GET请求...
weixin_34610364的博客
06-03 878
我是Node.js和JavaScript的新手。我有一个特定的问题，但大多需要有关最佳解决方案的建议。我正在运行Node服务器。我希望客户端能够向服务器提交字符串，然后服务器显示一个显示字符串数据的新HTML页面。我正在使用Express和Socket.io。在以下文件中，客户端会看到index.html，然后在提交表单后会看到return.html。我将输入字符串打印到控制台，输出是预期的(无论...
html表单提交后，表单内容满足条件跳转页面
最新发布
06-02
当表单提交后，要判断表单内容是否满足条件，然后再决定是否跳转页面，可以使用JavaScript来实现。 首先，在表单中添加一个"onsubmit"事件，当表单提交时会触发该事件。例如： ``` <form action="http://example.com/submit" method="post" onsubmit="return validateForm()"> ... </form> ``` 上面的代码表示，在表单提交时会调用名为 "validateForm()" 的JavaScript函数来判断表单内容是否满足条件。 然后，定义 "validateForm()" 函数，该函数判断表单内容是否满足条件，如果满足条件则返回true，否则返回false。例如： ``` function validateForm() { // 获取表单元素 var input = document.getElementById("input"); // 判断表单内容是否满足条件 if (input.value == "") { alert("请输入内容！"); return false; } // 如果满足条件，则返回true，表单提交成功 return true; } ``` 上面的代码表示，当表单提交时，会获取表单中的 "input" 元素，判断其内容是否为空。如果为空，则弹出提示框，返回false，表单提交失败。如果不为空，则返回true，表单提交成功，并跳转到指定的URL地址。 在这个例子中，如果输入框中的内容为空，则不会跳转页面，而是弹出提示框。如果输入框中的内容不为空，则会跳转到指定的URL地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值