新增完后返回列表页刷新页面

在传统的Web页面中，我们可以使用页面重定向或AJAX技术实现新增后返回列表页并刷新页面的效果。

如果使用页面重定向，当用户提交新增数据后，可以通过在控制器中设置重定向到列表页的URL，并在响应头部设置Location属性来实现页面跳转：

@RequestMapping("/add")
public String add(Model model, User user) {
    // 将用户提交的数据保存到数据库中
    userService.save(user);
    // 重定向到列表页
    return "redirect:/user/list";
}

而如果使用AJAX技术，则可以通过在提交新增数据的AJAX请求中，设置成功回调函数来实现新增后刷新列表页的效果。具体实现可以使用jQuery的ajax方法：

$.ajax({
    url: "/add",
    method: "post",
    data: formData,
    success: function() {
        // 新增成功后，重新加载列表页数据
        $("#list").load("/user/list");
    }
});

其中，`$("#list")` 是列表页的DOM元素，`load` 方法可以通过AJAX请求重新加载该元素的内容。

相关问题

vue2 elementui 后台新增完后返回列表页刷新页面

在Vue.js 2和Element UI中，可以使用路由导航和事件总线来实现新增后返回列表页并刷新页面的效果。

1. 在路由导航中定义列表页的路由

首先，在路由配置中定义列表页的路由，例如：

const router = new VueRouter({
  routes: [
    { path: '/list', component: List },
    { path: '/add', component: Add }
  ]
})

其中，List为列表页的组件，Add为新增页的组件。

2. 在新增页中提交数据并触发事件

在新增页中，通过Element UI的Form组件提交新增数据，并在提交成功后触发一个自定义事件，例如：

<template>
  <el-form @submit="onSubmit">
    <!-- 表单字段 -->
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      // 提交新增数据
      this.$http.post('/api/add', this.formData)
        .then(response => {
          // 触发自定义事件
          this.$emit('add-success')
        })
    }
  },
  data() {
    return {
      formData: {}
    }
  }
}
</script>

在提交成功后，通过`this.$emit`触发一个自定义事件`add-success`，表示新增成功。

3. 在列表页中监听自定义事件并刷新数据

在列表页中，监听新增页触发的自定义事件，并重新加载列表数据，例如：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表头和列 -->
    </el-table>
    <el-button type="primary" @click="add">新增</el-button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听新增成功事件
    this.$bus.$on('add-success', this.loadList)
    // 加载列表数据
    this.loadList()
  },
  beforeDestroy() {
    // 移除事件监听
    this.$bus.$off('add-success', this.loadList)
  },
  methods: {
    add() {
      // 跳转到新增页
      this.$router.push('/add')
    },
    loadList() {
      // 加载列表数据
      this.$http.get('/api/list')
        .then(response => {
          this.tableData = response.data
        })
    }
  },
  data() {
    return {
      tableData: []
    }
  }
}
</script>

在列表页的`mounted`钩子函数中，通过`this.$bus.$on`监听新增成功事件`add-success`，并在回调函数中调用`loadList`方法重新加载列表数据。在`beforeDestroy`钩子函数中，通过`this.$bus.$off`移除事件监听，避免内存泄漏。

在`add`方法中，使用`this.$router.push`跳转到新增页。在新增页中提交成功后，通过`this.$emit('add-success')`触发自定义事件，列表页会收到通知并重新加载数据。

vue 调用完新增数据接口后如何让页面刷新

有多种方法可以让页面刷新，以下是其中的两种：

1. 使用Vue的watch监听数据变化
在组件中使用watch监听新增数据的变化，当数据变化时重新获取数据并更新页面。例如：

<template>
  <div>
    <!-- 显示新增数据列表 -->
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 新增数据的表单 -->
    <form @submit.prevent="addData">
      <input type="text" v-model="newData.name">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 存放新增数据的列表
      newData: { name: '' } // 新增数据的表单数据
    }
  },
  methods: {
    addData() {
      // 调用新增数据接口
      // ...

      // 新增数据成功后，更新dataList
      this.dataList.push(this.newData)

      // 清空表单数据
      this.newData.name = ''
    }
  },
  watch: {
    dataList(newValue) {
      // 数据变化时重新获取数据
      // ...
    }
  }
}
</script>

2. 使用Vue的$route刷新页面
在组件中使用$route刷新页面。例如：

<template>
  <div>
    <!-- 显示新增数据列表 -->
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 新增数据的表单 -->
    <form @submit.prevent="addData">
      <input type="text" v-model="newData.name">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 存放新增数据的列表
      newData: { name: '' } // 新增数据的表单数据
    }
  },
  methods: {
    addData() {
      // 调用新增数据接口
      // ...

      // 刷新页面
      this.$route.go(0)
    }
  }
}
</script>

以上是两种常见的刷新页面的方法，根据具体情况选择合适的方法即可。