要实现Ajax提交数据并将返回的数据显示在地址栏上,可以按照以下步骤进行:
Ajax提交数据示例
$(document).ready(function() {
$('#submitBtn').click(function() {
var inputData = $('#dataInput').val();
$.ajax({
url: '/your-api-endpoint', // 替换为实际的API端点
type: 'POST',
data: {data: inputData},
success: function(response) {
// 更新地址栏URL
window.history.pushState('', '', '/your-page-url?data=' + response);
// 显示返回数据
$('#resultLabel').text(response);
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
});
这只是一个示例,你需要根据具体情况来编写服务器端代码和处理逻辑。在服务器端,你可以接收提交的数据,进行处理,并返回处理后的数据。
注意:由于无法直接修改地址栏的URL,我们使用window.history.pushState
方法来更新地址栏URL,这将在浏览器历史记录中创建一个新的历史条目。