ajax返回上一页并刷新页面—ajax返回一个页面

问题描述

在编程开发中，经常会遇到需要返回上一页并刷新页面的需求。例如，当用户在一个表单页面填写完数据后，点击提交按钮，提交数据到服务器进行处理，处理完成后需要返回到上一页并刷新页面，以便用户能够看到的数据。

解决方案

要实现这个功能，我们可以使用Ajax来异步加载上一页的内容，并使用JavaScript来刷新页面。

我们需要在前端页面中添加一个按钮，用于触发返回上一页并刷新页面的操作。例如，我们可以添加一个按钮元素，并为其绑定一个点击事件，如下所示：

```html

```

然后，在JavaScript代码中，我们可以使用Ajax来加载上一页的内容，并使用`history.go(-1)`来返回上一页，如下所示：

```javascript

document.getElementById("backButton").addEventListener("click", function() {

// 使用Ajax加载上一页的内容

var xhr = new XMLHttpRequest();

xhr.open("GET", document.referrer, true);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

// 将上一页的内容插入到当前页面中

document.body.innerHTML = xhr.responseText;

// 返回上一页并刷新页面

history.go(-1);

}

};

xhr.send();

});

```

上述代码中，我们创建一个XMLHttpRequest对象，然后使用`open`方法指定请求的方法和URL，这里使用`GET`方法，并将URL设置为`document.referrer`，即上一页的URL。接着，我们通过`onreadystatechange`事件监听器来监听Ajax请求的状态变化，当请求完成且成功时，我们将上一页的内容插入到当前页面中，并使用`history.go(-1)`返回上一页并刷新页面。