html导航栏整体刷新,ajax实现点击导航栏对应页面内容异步刷新

这是自己在第一次接触TP框架的时候 写的AJAX

虽然写的不够好 ,但是适合刚开始接触的人借鉴下

具体注释写在语句后面!

代码如下:

function getItems(id) {

$.ajax({

type: "POST", //请求数据方式 是POST请求

url: "/index.php/engineering/getItems", //这是所需要异步的页面html路径

dataType: "json", //数据类型是JSON

data: {"cid":id}, //数据根据ID进行变化

success: function(json){

var html = '';

for (var i = 0; i < json.length; i++) {

//循环添加多个值(这里的html每个位置要加上一对单引号包起来,也就是说 这里是要实现异步刷新的内容)

html = '

' +

' '+

'

'+

''+json%5B%20i%20%5D%20.picurl+'%20'+

'

'+

'

'+json[ i ].title+'

'+

' '+

'

';

}

$("#itemsBlock").html(html); //在页面上附上id 传到这里!

}

});

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现每次点击侧边导航栏刷新页面的效果,您可以使用Element UI的Menu组件和Vue Router的导航守卫来实现。 首先,确保您已经安装并使用了Vue Router和Element UI。可以使用以下命令安装Element UI: ``` npm install element-ui ``` 然后,在您的Vue项目的入口文件(通常是main.js)中,导入Element UI并将其作为Vue应用的插件使用: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接下来,在您的Vue组件中使用Menu组件来创建侧边导航栏: ```html <template> <div> <el-menu :default-active="activeMenu" @select="handleMenuSelect"> <el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/about">关于</el-menu-item> </el-menu> <router-view></router-view> </div> </template> <script> export default { data() { return { activeMenu: '' } }, methods: { handleMenuSelect(index) { this.activeMenu = index this.$router.push(index) } } } </script> ``` 在上述代码中,我们使用了Menu组件来创建侧边导航栏,并通过`default-active`属性和`@select`事件来处理选中状态和点击事件。在点击侧边导航栏时,通过`$router.push()`方法来触发路由跳转。 最后,在Vue Router的导航守卫中添加刷新页面的逻辑。在您的路由配置文件(通常是router/index.js)中,添加`beforeEach`导航守卫: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/home', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') }, // 其他路由... ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) router.beforeEach((to, from, next) => { if (to.path === from.path) { location.reload() } next() }) export default router ``` 在上述代码中,我们在`beforeEach`导航守卫中判断当前路由的路径是否与上一个路由的路径相同,如果相同,则调用`location.reload()`方法来刷新页面。 这样,每次点击侧边导航栏时,都会刷新页面内容。请注意,在使用`history`模式时,需要在服务器配置中启用对应的URL重写规则。如果您在开发环境中使用Vue CLI进行调试,通常会自动处理这些配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值