$.ajax({
url: "../../../Tools/WeChatMenu.ashx?action=get_menu",
type: "post",
data: { "appid": $("#use").attr("app_id") },
beforeSend: function (XMLHttpRequest) {
showout(1,"正在请求数据...");
},
success: function(data) {
hiddenoutbox(); //成功后隐藏弹出层
var json = $.parseJSON(data);
var bizmenu = $("#bizmenu"),
dialogBox = $("#dialogBox")
if (json.msg == 1) {
$.each(json.msgbox, function(i, item) {
$("#level1").find(".nav_btn").html(item.data_name);
$("#level1").find(".nav_btn").attr("db_id", item.id);
$("#level1").children().attr("id", "level1_" + i);
bizmenu.append($("#level1").html());
$("#level1").attr("data-domid", i);
if (item.stair_list != null) //有子菜单
{
var bizmenu_name = $("#bizmenu_name"),
dialogBox = $("#dialogBox"),
menuHtml = $("#level2_1").html();
$.each(item.stair_list, function(j, item2) {
$("#level1_" + i).find(".sub_nav_list").append(menuHtml);
$("#level2_1_1").attr("id", "level2_1_" + j);
$("#" + "level2_1_" + j).find(".level2name").html(item2.data_name);
$("#" + "level2_1_" + j).find(".level2name").attr("db_id", item2.id); }) }
})
}else
{
showout(0,json.msgbox);
window.setTimeout(hiddenoutbox,3000);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
showout(0,"状态:" + textStatus + ";出错提示:" + errorThrown);
window.setTimeout(hiddenoutbox,3000);
}
})

  

弹出层样式:

.showoutbox{width:300px; min-height:32px; position:absolute; top:0; z-index:300; background:#0F0; display:none; text-align:center; line-height:32px;color:#fff}
.underbox{width:100%; background:#000; filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0; z-index:299; position:absolute; left:0; top:0; display:none;}

弹出层方法:

//弹出层方法
function showout(status,datatext){
$(".showoutbox").html(datatext);
var myleft=($(window).width()-300)/2+'px';
if(status==1)
$(".showoutbox").css({left:myleft,display:'block',background:'#529E45'});
else if(status==0)
$(".showoutbox").css({left:myleft,display:'block',background:'#ED973A'});
$(".underbox").css({height:$(window).height()+'px',display:'block'});
}
//关闭弹出层
function hiddenoutbox(){
$(".showoutbox").text("");
$(".showoutbox").removeAttr("style");
$(".underbox").removeAttr("style");
} //status=0或1,代表失败或成功,datatext=提示的文本

层:

<div class="showoutbox"></div>
<div class="underbox"></div> //不能放到任何div下,直接放到body下

  

Ajax效果--个人收藏的更多相关文章

  1. C# Winform 实现Ajax效果自定义按钮

    技术看点 WinForm自定义控件的使用 自定义控件gif动画的播放 需求及效果 又来一波 C# GDI自定义控件show .这个控件已经使用几年了,最近找出来重构一下.原来是没有边框的,那么导致导航 ...

  2. 使用script的src实现跨域和类似ajax效果

    在解决js的跨域问题的时候, 有多种方式, 其中有一种是利用script标签的src属性,因为这个属性是不受域名限制的,我们可以直接让src的这个链接指向跨域网站的一个接口, 这个接口返回的是js代码 ...

  3. Ajax效果

    Ajax的效果就是不通过网页的跳转,就可以通过请求,就可以自动加载某个网页,在注册帐号时,经常 不通过网页跳转从数据库中查看是否有相同数据的出现,确认是否能够正确注册 下面是用其他方式实现ajax的效 ...

  4. 天气预报的Ajax效果

    最近在网站上看了很多显示实时天气预报的,挺实用而且用户体验也不错.对用户的帮助也比较大,用户可以通过你的网站了解到实时的天气信息.感觉比较有意思,于是自己钻研了一下其中的实现方法.于是决定把代码分享给 ...

  5. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  6. thinkphp中ajaxReturn方法实现ajax效果

    前台代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. IFrame实现的无刷新(仿ajax效果)...

    前台代码: <iframe style="display:none;" name="gg"></iframe> <form act ...

  8. js+html实现遮罩层效果(收藏哦)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

  9. 自定义ajax,添加loading效果

    自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...

随机推荐

  1. Windows下重置MySQL密码(最开始是因为Access denied for user 'root'@'localhost'这个原因,无法登陆 'root'@'localhost')

    本人使用的MySQL5.5,其他版本未测试过. 方法一: 更改密码: mysql -u root -p Enter password:*** mysql>use mysql; 选择数据库 Dat ...

  2. python基础21 ------python基础之socket编程

    一.C/S架构和B/S架构的简介 略 二.osi七层模型 略 三.socket层 1.如图所示: socket层是存在于应用层和传输层直接抽象出来的一层. 2.socket层是什么? Socket是应 ...

  3. 【leetcode刷题笔记】3Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  4. apache中配置php支持模块模式、cgi模式和fastcgi模式的实验

    首先安装apache.mysql和php,依次顺序安装. 1.apache.mysql的安装比较简单,略过 2. php的安装,我安装的是php5.3.6内置了php-fpm,所以不需要再单独下补丁了 ...

  5. android6.0 外部存储设备插拔广播以及获取路径(U盘)【转】

    本文转载自:https://blog.csdn.net/zhouchengxi/article/details/53982222 这里我将U盘作为例子来说明解析. android4.1版本时U盘插拔时 ...

  6. Vue 5小时学习小教程

    Vue Vue Vue 起步 指令 v-bind v-if v-for v-on v-model v-bind和v-on缩写 搭建Vue开发环境 vue项目结构 Vue开始 数据绑定, 绑定属性 循环 ...

  7. castle windsor学习-------Container Events 容器的事件

    所有的事件是实现IKernelEvents 接口,已容器的Kernel属性暴露出来 1. AddedAsChildKernel 当前的容器添加子容器或其他容器时触发 2. RemovedAsChild ...

  8. spring boot项目启动报(No session repository could be auto-configured, check your configuration (session store type is 'null'))

    找到项目的application配置文件,增加 spring.session.store-type=none,重新启动问题解决 注:因为项目未使用redis管理session,可以如上设置,如果想使用 ...

  9. Spring Boot- 用idea新建spring boot web项目

    1.新建project 2.选择Spring Initializr,next 3.输入项目信息,next 4.选择web依赖以及Spring Boot的版本,next 5.Finish 6.Enabl ...

  10. Hadoop- Hadoop运维小计

    如果是新添加一个节点,需要执行以下步骤: 首先,把新节点的 IP或主机名 加入主节点(master)的 conf/slaves 文件. 然后登录新的从节点,执行以下命令: $ cd Hadoop_pa ...