淘先锋技术网

首页 1 2 3 4 5 6 7

ajax两个html传递

AJAX是一种在前端开发中常用的技术，它可以通过异步的方式在两个HTML页面之间进行传递。在本文中，我们将通过举例说明，介绍如何使用AJAX实现两个HTML页面之间的数据传递。

首先，让我们来看一个简单的例子。假设我们有两个HTML页面，一个是index.html，另一个是result.html。在index.html页面中，我们有一个表单，用户可以在输入框中输入一段文字，并点击提交按钮。一旦用户点击提交按钮，通过AJAX的技术，这段文字将会传递到result.html页面，并显示在页面上。

// index.html页面代码
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var text = $("#inputText").val();
$.ajax({
type: "POST",
url: "result.html",
data: {text: text},
success: function(response) {
$("#result").html(response);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="inputText"/>
<button id="submit">提交</button>
<div id="result"></div>
</body>
</html>
// result.html页面代码
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var text = getParameterByName("text");
$("#resultText").text(text);
});
function getParameterByName(name) {
var url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
<div id="resultText"></div>
</body>
</html>

在index.html页面的脚本中，我们使用了jQuery库来简化AJAX的操作。当用户点击提交按钮时，从输入框中获取用户输入的文字，然后通过AJAX的POST请求将输入的文字作为数据传递给result.html页面。result.html页面会从URL中获取到传递过来的文字，并将其显示在页面上。

通过这个例子，我们可以看到如何使用AJAX在两个HTML页面之间进行数据传递。在实际的开发中，我们可以根据需要进行参数的传递和处理，以实现更丰富的功能。