js/ajax提交请求成功后跳转到另一个页面

最新推荐文章于 2024-04-03 09:45:51 发布
最新推荐文章于 2024-04-03 09:45:51 发布
阅读量8.8k 收藏 13
点赞数 5
分类专栏： 前端 文章标签： js跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QingXu1234/article/details/103274008
版权

实际场景：在弹窗中输入数据提交后，需要跳转到另一个页面展示（不是父页面）

parent.location.href = 'url';
Dialog.closeSelf();
js/ajax提交成功后采用以下方式跳转：
1、本页面跳转:"window.location.href"、"location.href" 
2、上一层页面跳转:"parent.location.href"
3、最外层的页面跳转:"top.location.href"
举例说明：
如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写
"window.location.href"、"location.href"：D页面跳转
"parent.location.href"：C页面跳转
"top.location.href"：A页面跳转
如果D页面中有form的话,
<form>: form提交后D页面跳转
<form target="_blank">: form提交后弹出新页面
<form target="_parent">: form提交后C页面跳转
<form target="_top"> : form提交后A页面跳转
LoneWalker、
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
小白使用React---ajax请求成功后跳转到另一个页面
yingzizizizizizzz的专栏
12-05 8250
$.ajax({ type:"GET", url:this.url, dataType:"json", success:function (result) { if(result.meta.success===true){
jquery的ajax提交后，会跳转页面
daxiaojianghujs2016的博客
08-31 581
今天在写代码的时候，遇到一个很奇怪的问题，一个form表单，用的是ajax的方式提交。结果，在服务器端php中，使用exit(),函数后都不能停止，并且继续跳转到本页。请求如下： 第一个请求中，其实我已经停止了代码，但程序并没有执行到，但返回的也是200状态码。 虽然，请求返回的是200，但查看reponse时，却发现是空的。 后来经过排查发现，原来是前端写的页面已经...
发送ajax然后跳转,在页面跳转和关闭之前发送AJAX数据
weixin_32968239的博客
08-05 811
有时候会遇到这样的需求：用户在离开页面之前(跳转到其他页面，刷新页面，关闭浏览器等)发送一个 Ajax 请求到服务器。例如，需要计算用户在当前页面中停留的时长，你需要等到用户离开时才发送请求。在用户离开之后，必须把他的停留时长发送到服务器，然后可以把数据保存起来。在本文中外面将介绍如何处理这种需求。用 unload 事件监测页面卸载unload 事件会在页面从内存中卸载时触发。可以用此事件来发送一...
ajax 提交数据到后台jsp页面及页面跳转问题
11-30
ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给logincheck.jsp $.ajax({ type : "POST", url : baseUrl+"m/module/querymodulebyname.do", dataType:"json", data: { modName:title }, succes
Ajax实现页面局部刷新
12-24 4315
这里通过点击一个按钮，然后下面产生一段文字，而整个页面不用刷新 运行结果：
ajax实现页面跳转
qq_46111269的博客
07-28 7072
上网去查，学到一个新的方法top.location.href，诶，这个top就有意思了，它可以跳脱出框架，在顶层打开新窗口，看起来就很有戏，果然，成功了。刚学完ajax没多久，想着写个注册界面，利用ajax把用户名和密码传过来，注册成功以后跳转到登录界面，之前一直用的是Servlet来重定向，结果直接就是说没有反应，调了半天就是不成功。，我又想到一个方法，既然后端传不了，那我走前端，前端里面不是有一个方法location.href，我就喜滋滋的把路径一封装传前面去了。...
表单提交事件跳转问题解析
SuperFivern的博客
01-02 2269
所以，在表单的提交事件如果想要通过location.href去跳转的话，需要阻止表单的默认行为！其实对比第一和第三段代码不难发现，后者能够跳转的原因就是因为在事件处理函数里面阻止了表单的默认行为，这样原本指定的location.href就能够正常运行。问题描述：在表单的提交事件里面，使用location.href属性无法去跳转到指定页面的问题？而我们这样的代码（如下）就可以跳转到指定的页面上去。这样的代码相信大家应该是能知道可以跳转的。这样的代码页面也是可以跳转去指定页面的。
ajax请求成功后跳转页面
Dxy1239310216的博客
04-03 1097
在我们日常的开发工作中，经常需要使用到ajax进行异步请求，而在请求成功后，我们可能需要进行页面跳转的操作。需要注意的是，使用history API进行跳转并不会真正加载新的页面内容，只是改变了浏览器的地址栏和历史记录。如果你需要加载新的页面内容，还需要结合其他技术（如单页面应用中的路由管理）来实现。这种方法可以在不重新加载页面的情况下改变浏览器的历史记录，从而实现无刷新跳转。当我们发送一个ajax请求后，通常需要监听请求的完成状态，并在请求成功后进行相应的处理。的值为新的页面URL，从而实现页面跳转。
Ajax post请求跳转页面
10-20
然后在Ajax请求成功后，通过JavaScript操作这个表单进行提交： ```javascript $.post(url, { method: "regist", userName: $nameEle.val(), email: $emailEle.val(), password: $passwordEle.val() }, function...
ajax提交session超时跳转页面使用全局的方法来处理
10-26
如果检测到这是一个AJAX请求，过滤器会在响应头中添加一个自定义字段`sessionstatus`，并将值设为"timeout"。对于非AJAX请求，直接重定向到指定的登录页（例如`/test/index.jsp`）。 接下来，在客户端，我们需要...
ajax跳转到新的jsp页面的方法
10-19
通过Ajax，我们可以发送一个请求到服务器，服务器处理请求并返回用户信息，然后在前端JavaScript中解析这个信息，并将其插入到相应的页面区域，实现局部更新。 【Ajax跳转到新页面】 然而，当需要跳转到新的jsp...
重写 ajax 实现 session 超时跳转到登录页面实例代码
10-19
在Web开发中，Session是服务器用来跟踪用户状态的一种机制，当用户登录后，服务器会创建一个Session对象并关联到客户端的浏览器。然而，如果用户长时间无操作，Session可能会因为超时而失效。在这种情况下，通常需要...
JS页面之间ajax跳转传值与接受传值
Start_Simple的博客
01-06 1317
JS页面之间ajax跳转传值与接受传值
jquery.ajax实现点击数据，传数据到另一个页面
wkywky123的博客
03-20 1736
1.点击进行跳转的页面，html代码。2.页面加载的数据，json文件。07新页面.html。
一个JSP页面用AJAX跳转另一个JSP页面再返回
qq_38206299的博客
06-10 1375
一个JSP页面用AJAX跳转另一个JSP页面再返回 第一个jsp页面： <form action="#" id="update"> <tbody> <% cart c = new cart(); c.getConn(); String s = ""; if (session.getAttribute("loginName") != null) { s =
表单提交、Ajax提价与后端页面跳转之间的关系
qq_63173180的博客
08-04 329
1、我们知道spring MVC是可以直接进行视图解析然后跳转页面的，但是我开发过程中，使用了Ajax异步更新表单，然后再用后端进行跳转，发现页面并不能跳转。2、 随后又测试了表单提交，也就是使用form的action元素配合submit类型的按钮进行提交，发现此时后端就可以使用spring MVC进行页面跳转了。3、总结下来就是，使用异步方式提交数据时后端不能直接页面跳转，因为异步调用时有一个回调函数。建议页面跳转操作留在前端完成，后端返回一个约定的标志，然后前端进行相关处理比较好。...
使用AJAX实现页面跳转
热门推荐
Golden_lion的博客
05-18 9万+
$.ajax({ type:"POST", url: //你的请求程序页面随便啦 async:false,//同步：意思是当有返回值以后才会进行后面的js程序。 data://请求需要发送的处理数据 success:function(msg){ if (msg) {//根据返回值进行跳转 window.location
ajax中跳转页面
二十二画生的博客
08-25 2658
$("a").on("click",function(){ location.href="regist.html"; //跳转注册页面 }) 通过服务端的重定向操作是无法在Ajax中实现页面跳转的，如果要在Ajax调用完毕后进行页面跳转，则只能通过前端跳转 ...
ASP外观专利图像检索平台(源代码+论文).rar
最新发布
07-21
ASP外观专利图像检索平台(源代码+论文)
设计一个登录界面 html 提交到远程服务器 接收成功后跳转到其他页面
05-30
以下是一个简单的登录界面的 HTML 代码，包含用户名、密码和登录按钮，并且在登录成功后跳转到其他页面： ```html <!DOCTYPE html> <html> <head> <title>登录</title> <meta charset="utf-8"> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; } h1 { text-align: center; margin-top: 50px; } form { width: 300px; margin: 0 auto; background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 16px; margin-bottom: 20px; box-sizing: border-box; } input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; font-size: 16px; border-radius: 3px; cursor: pointer; transition: background-color 0.3s ease; } input[type="submit"]:hover { background-color: #3e8e41; } </style> </head> <body> <h1>登录</h1> <form id="login-form" action="http://example.com/login" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> <script> // 获取表单元素和提交地址 const form = document.getElementById('login-form'); const action = form.action; // 监听表单提交事件 form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 发送 AJAX 请求 const xhr = new XMLHttpRequest(); xhr.open('POST', action); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { alert('登录成功！'); window.location.href = 'http://example.com/other-page'; // 跳转到其他页面 } else { alert('登录失败！'); } }; xhr.send(new FormData(form)); }); </script> </body> </html> ``` 这个登录界面使用了 HTML、CSS 和 JavaScript，采用了简洁的扁平化设计风格，使用了表单元素来实现输入框和登录按钮，同时添加了一些简单的样式来美化界面。在表单提交时，通过 AJAX 发送请求到远程服务器，如果服务器返回状态码为 200，则表示登录成功，此时通过 `window.location.href` 跳转到其他页面。你可以根据需要进行修改和完善。注意，这里的 `action` 属性需要设置为远程服务器的登录接口地址。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

LoneWalker、

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值