在ajax调用后执行javascript重定向
在使用 AJAX 调用后执行 JavaScript 重定向是一个常见的需求。您可以在 AJAX 请求成功后，根据返回的结果进行重定向。以下是一个简单的示例，展示了如何在 AJAX 调用后执行重定向。
示例：使用 jQuery 的 AJAX 调用
假设您使用 jQuery 进行 AJAX 调用，您可以在成功的回调函数中使用 window.location.href 来进行重定向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Redirect Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="submitButton">Submit</button>
<script>
$(document).ready(function() {
$('#submitButton').click(function() {
$.ajax({
url: 'your-api-endpoint', // 替换为您的 API 端点
type: 'POST',
data: {
// 发送的数据
},
success: function(response) {
// 根据响应进行重定向
if (response.success) {
// 重定向到新页面
window.location.href = 'new-page.html'; // 替换为您要重定向的 URL
} else {
// 处理错误情况
alert('Error: ' + response.message);
}
},
error: function(xhr, status, error) {
// 处理 AJAX 错误
alert('AJAX Error: ' + error);
}
});
});
});
</script>
</body>
</html>示例：使用原生 JavaScript 的 Fetch API
如果您不使用 jQuery，而是使用原生 JavaScript 的 Fetch API，您可以这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Redirect Example</title>
</head>
<body>
<button id="submitButton">Submit</button>
<script>
document.getElementById('submitButton').addEventListener('click', function() {
fetch('your-api-endpoint', { // 替换为您的 API 端点
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
// 发送的数据
})
})
.then(response => response.json())
.then(data => {
// 根据响应进行重定向
if (data.success) {
// 重定向到新页面
window.location.href = 'new-page.html'; // 替换为您要重定向的 URL
} else {
// 处理错误情况
alert('Error: ' + data.message);
}
})
.catch(error => {
// 处理 AJAX 错误
alert('Fetch Error: ' + error);
});
});
</script>
</body>
</html>总结
在 AJAX 调用后执行 JavaScript 重定向的基本步骤是：
- 发送 AJAX 请求。
- 在成功的回调中检查响应。
- 根据响应的结果使用
window.location.href进行重定向。
相关·内容
1回答
在我的页面上，当用户单击列表中的任何图书名称时，它将发送数据一个php查询，查询后，该图书页将在浏览器中打开。
现在，在php进程之后，它无法重定向任何图书页。我也尝试过用echo("<script>location.href = 'http://myweb.com/$user';</script>");和ob_start();重定向，但也没有工作。在php之前没有空白处，也没有错误日志。将数据很好地发
浏览 6提问于2015-07-26得票数 1
回答已采纳
这是我的ajax调用：<body onload = "${remoteFunction(controller:'accountManagement', action:'createAccount',params.facebookUID, gender: params.gender, firstName: params.firstName, lastName: params.lastName])}">def
浏览 0提问于2012-09-12得票数 2
回答已采纳
我正在寻找一种在ajax调用后动态加载JavaScript的方法，以加载对话框/弹出窗口。
我希望对话框加载它自己的JavaScript文件和任何内联JavaScript。我见过这样的示例:使用一个方法执行ajax调用，将html加载到DOM中，然后拥有“完整”的回调，加载方法将在加载html之后调用这些回调。但是，使用此方法会阻止对话框上的任何JavaScript执行，
浏览 0提问于2012-10-30得票数 2
回答已采纳
我正在尝试使用ajax解析要在php页面上处理的数据，并让php回显一个重定向到另一个页面的javascript，但它不起作用。我读到过js在运行ajax调用后不能工作，所以我想知道是否有解决它的方法。调用是一个普通的xhttp请求，它被发送到php进行处理，之后应该会发生重定向： if(isset($_POST['return_time'])){
echo '<script type="text/javascrip
浏览 16提问于2019-10-03得票数 0
回答已采纳
2回答
所有的工作原理，使图像保存到服务器，但我不能让页面重定向或改变，一旦完成。我用于生成图像的javascript/kineticjs代码是： stage.toDataURL({ var ajax = new XMLHttpRequest();
ajax.open("POST",'upload_screenshot.php
浏览 3提问于2013-08-09得票数 0
回答已采纳
5回答
假设我使用ajax (例如，通过jQuery)向实现PRG模式的应用编程接口发出POST请求。因此，它将重定向我：HTTP/1.1 303 See Other然后，jQuery将自动跟随重定向并执行以下操作：然后使用后一个请求的输出调用响应处理程序(成功、失败等)。但是，
浏览 1提问于2013-05-08得票数 8
2回答
我有一个函数，它利用jQuery的post特性向我的注销处理程序发送一个ajax请求，它将销毁会话(由asp.net设置)并重定向到登录页面：有什么想法吗？
浏览 0提问于2009-03-03得票数 0
有没有可能在有限的时间内停止执行javascript？await是我遇到的最接近的东西，但它仍然不会停止当前javascript的执行。我实际上尝试过在一个变量上执行忙等待，但在这种情况下，它无法走出忙等待循环。此外，我甚至不知道在javascript中是否可以停止/停止，因为它是单线程的。我正在尝试的确切场景： <make 2 ajax requests, wai
浏览 2提问于2017-05-06得票数 0
2回答
script> var url="actionurl"; return false;</script> $(document).ready( function () {
浏览 3提问于2016-02-11得票数 1
回答已采纳
长话短说，我有一个web应用程序，其中有一个按钮，可以触发2个异步ajax调用。2 ajax调用使用的参数实际上是应用程序中设置的javascript变量。当完成两个ajax调用时，将使用一个初始ajax调用的结果执行第三个ajax调用。完成第三个ajax调用后，在内容中添加一个新的div。到目前为止，我在WebDriver中使用了WebDriver，通过两个简单的操作可以轻松地模拟上述功能：
$I->clic
浏览 1提问于2016-06-08得票数 2
回答已采纳
选择日期后，函数将使用所选日期执行，并且日期选择器关闭。那么多就行了。
从用户选择日期到Datepicker关闭可能需要几秒钟时间。问题是，直到LoadAppointmentTimeSlots函数执行之后，DIV才会出现(此时DIV再次隐藏)。我已经用几种方法对setTimeout进行了试验，但都没有成功。self.LoadAppointmentTimeSlots(datetext); // function within view model that uses $AJAX
浏览 1提问于2012-12-07得票数 2
我想调用我的操作，让该操作返回直接呈现到视图上的结果部分视图，或者将操作重定向到服务器上的另一个页面。但是，当我通过jQuery执行此操作时，它似乎将重定向的页面加载到我的目标div元素中，而不是干净利落地重定向并有效地重新加载页面/站点。jQuery调用： type: "GET", dataType: "html",
success: functio
浏览 0提问于2012-09-07得票数 3
回答已采纳
2回答
我使用一些Jquery/ajax代码根据select的值刷新div的内容。col-sm-9"></div>
<script type="text/javascript当我第一次加载页面(警报'tada‘显示)时，它工作得很好，但是当它从ajax调用中调用时
浏览 3提问于2014-02-10得票数 0
回答已采纳
问题是当您使用.load()函数时，需要在加载的文件中运行的javascript无法工作，因为我猜DOM已经加载了。解决这个问题的简单方法是在加载的文件中再次加载javascript，但是如果你有很多加载的文件，让javascript到处都是不是很好的做法。 if(s
浏览 0提问于2012-03-21得票数 3
回答已采纳
2回答
><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>,"ID=4");});
</head>
如果我使用像下面这样的另一个php代码，我的
浏览 2提问于2017-02-20得票数 0
今天，我发现我网站的dev版本没有执行成功的回调，但是所有其他的javascript和jquery代码都运行良好。甚至我的ajax请求也被执行，我可以在firebug中看到响应。= ''){ $.ajax({
type:部件执行得很好，我可以在firebug
浏览 5提问于2011-01-17得票数 0
回答已采纳
2回答
在ASP MVC 5中，我有一个表，每行都有删除按钮。当我点击"Delete“按钮时，我会显示一个模式确认(bootstrap)对话框:如果用户确认删除，我会调用下面的javascript函数： });因此在控制器中称为db.SaveChang
浏览 2提问于2015-02-06得票数 1
回答已采纳
1回答
如果输入的密码正确，则提交第一个表单，否则页面将被重新加载/重定向回其自身。第一个表单将包含许多字段，但我只是使用该表单进行测试。此表单使用jQuery $.ajax()进行处理。在php中，我检查密码是否与存储的密码匹配，回显回显匹配或不匹配，这将显示在模式中。如果ajax结果等于匹配，那么我就用$(‘.确认- form’).submit()处理第一个表单；我确信我没有以一种安全的方式这样做。}else{
浏览 3提问于2013-11-29得票数 0
回答已采纳
我在一个类似的系统上工作，我设法让它正常工作，但是为了让它正常工作，我需要它来检查状态是否被喜欢，如果是，那么不像它，如果不是，那么就喜欢它。下面是我的Javascript： $.get('https://mysite/stuff/ajax/isliked.php', {postid: postid<?echo $status
浏览 4提问于2015-01-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
