zoukankan      html  css  js  c++  java
  • 页面无刷新切换实现

    说明:针对有些后台为了实现不刷新固定资源,如菜单,会需要局部切换刷新页面,实现方式如下:

    方式一:

    $.ajax({
    	type: 'post',
    	url: webRoot+url,
    	dataType: 'html',
    	success: function(data){
    		$('.page-title').html($(obj).find('.title').text());//页面顶部标题更新
    		$('.content-header').html(header);//面包屑更新
    		$('.content-panel').html(data);//主内容替换
    	}
    });
    

    注:ajax请求类型为html时,整个页面会作为数据放到data中,可供js操作放到指定的元素中。

    方式二:

    $("#body-main-content").load(url, paramedata, function(data, status){
            //if(status=="error"){
            //    $("#body-main-content").html(data);//错误提示直接放到页面
            //    return false;
            //}
            //给页面设置标题描述等信息
    	assignPageAttr();
    });
    

    注:

    load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

    注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。

    语法

    load(url,data,function(response,status,xhr))
    参数描述
    url 规定要将请求发送到哪个 URL。
    data 可选。规定连同请求发送到服务器的数据。
    function(response,status,xhr)

    可选。规定当请求完成时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
    • xhr - 包含 XMLHttpRequest 对象
  • 相关阅读:
    创建对象的七种方式
    设计模式之工厂模式
    设计模式之单例模式
    排序算法之插入排序
    排序算法之选择排序
    类及对象初体验
    排序算法之冒泡排序
    迭代器和生成器
    装饰器
    函数进阶
  • 原文地址:https://www.cnblogs.com/leskang/p/7728176.html
Copyright © 2011-2022 走看看